一般网站都是980或者960或者1000等的布局,没有超过1000 。最近我优势的网站版心为1040,在1024的分辨率下会出现问题的。现在就背景图问题跟大家分享一下,希望能帮助到您。
一般情况下都是把需要全屏的背景图给body,这样更好的适应各个浏览器和各个显示屏的分辨率。如果背景图有两个的时候即:head或者content部分一个背景图,而bottom部分一个背景图,中间内容部分高度需要自适应,不可固定高度。此时会把背景图分别给两个div.然后用定位固定他们的位置。看下面的实例:
复制代码 代码示例:
.float_top_bj {
position:absolute;
z-index:91;
/*width:100%;*/
min-width:1140px;
margin:0 auto;
url(".. /../images/commonality/fu_dbg.png") repeat-x scroll center top transparent;
height:368px;
top:110px;
left:0;
}
.float_bottom_bj {
position:fixed;
z-index:92;
width:100%;
url(".. /../images/commonality/bj_db.png") repeat-x scroll center bottom transparent;
height:400px;
bottom:24px;
left:0;
}
上面有个问题,给div宽为100%时,浏览器窗口缩小或者在低于1040的分辨率下背景图会出现白边。用谷歌的开发者工具或者火狐的firebug选不到那个白边,是不是白边已经不是网站的区域?为何不能选?是不是因为版心为1040?而低屏率下宽为1024,都不够版心的,而div取到100%的宽最宽也就是1024个像素了,所以宽度达不到1040,因此(1040-1024)的右边部分就出现了白边了。
面对问题我是这样解决的:给div一个最小宽度,让它的宽度自动适应。这个最低宽度要大于1040。这样背景图就全屏了,浏览器窗口缩小时没有白边了。
注意:width:100%或者min-width:1140的设置都会受到定位的影响。
#center {
min-width:1140px;
width:atuo !important;
width:1140px;
z-index:90;
}
没有定位的情况下会很好。
#header{
min-width:1140px;
width:auto !important;
width:1140px;
margin:0 auto;
z-index:95;
background:#fff;
}
#header{
width:auto !important;
}
需要考虑兼容IE6哦。