HTML背景图片不同分辨率全屏拉伸铺满

发布于 2012-12-11  20.68k 次阅读

搞了一个小时，网上的答案多是囫囵吞枣的，整里一下，必须要动态设置才行。 repeat-x ,no-repeat 什么的都不行！ 具体方法看代码：

<body>
    <img  id="imgbg" src="themes/default/images/loginbg.png" alt="HTML背景图片不同分辨率全屏拉伸铺满" />
    <div>
        ....
</body>
或者在body里面套一个顶层div
<body>
<div style="backgroud-image:url('logbg');"> //不用设置width/height
    <div>
    ...
    </div>
</div>
</body>

$(document).ready(function(){var Wwidth = $(window).width();var Wheight = $(window).height();$("#imgbg").css({'width':Wwidth+'px','height':Wheight+'px'});//这样设置万全的好处，就是使得控件的相对位置不会发生变化

【问题】：这样也会使页面预留出一部分空间，背景上下左右会有10+px的白色空出部分，不甚雅观，怎么处理？

【答案】：终于找到解决方法了，重置控件样式

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,dd,dl,dt,li,ol,ul,fieldset,form,label,input,button,select,textarea,table,tbody,thead,tr,th td{padding:0;margin:0;}body{font-size:12px;font-family:"宋体";}img{border:none;vertical-align:middle;}table{border-collapse:collapse;}.mc{margin-left:auto;margin-right:auto;}ol,ul{list-style:none}a{text-decoration:none;color:#000;}em{font-style:normal}.l{float:left;}.r{float:right;}.cl{clear:both;}.dn{display:none;}.b{font-weight:bold;}.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}.rel{position:relative;}.abs{position:absolute;}.f12{font-size:12px;}.f14{font-size:14px;}.f16{font-size:16px;}.f18{font-size:18px;}.white{color:#FFF}.black{color:#000;}input,button,select,textarea,a:active{outline:none}/*重置google浏览器下面的边框*/textarea{resize:none;}/*禁止在FF4中textarea通过鼠标拖动改变大小*/

或者嫌麻烦*{padding:0px,margin:0px} 搞定