div的背景图片适应多种显示屏的分辨率是如何实现的?

发布时间:2019-07-18编辑:脚本学堂
一般网站都是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哦。