CSS篇-02 背景图片如何自适应

最新推荐文章于 2025-09-15 23:39:28 发布

原创最新推荐文章于 2025-09-15 23:39:28 发布 · 2.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #es6 #html #html5

背景图片如何自适应，不管屏幕尺寸改变都可以正常显示，不留白也不重复

首先，如果是给整个屏幕设置背景图的话，最好不要给body设置背景，body权重大
所以：

即使是整个屏幕，也别给body设置背景，宁愿写个最大的div包住所有，给这个div设置背景，也不要给body设置！！

好了，直接上代码~

    <style>
        .lll{
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            zoom: 1;
            background: url(http://file02.16sucai.com/d/file/2014/0829/372edfeb74c3119b666237bd4af92be5.jpg) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center top;
            z-index:-1000;
        }
    </style>
</head>
<body>
<div class="lll">
    
</div>
</body>

解释一下CSS代码的作用:

1、这三行代码是使设置背景的div的坐标在屏幕的最左最上

这里一定用固定定位position:fixed;

position:fixed; 
top: 0;     
left: 0;

2、即和body大小一样，覆盖整个屏幕

width:100%;
height:100%;

3、cover，使其占满整个盒子，不会留白

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

4、背景图片定位在中间，靠顶；这样当屏幕尺寸改变时，中间内容都会一直展示

background-position: center top;

5、这个z-index值要设置为最小，其他内容才能显示在背景图之上（最小就行，-1000是我随便设置的）

z-index:-1000;

6、这个解决兼容问题（这个我还不太懂，，下面几行是百度的）

zoom: 1;

兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：
触发IE浏览器的haslayout。解决ie下的浮动，margin重叠等一些问题。
用css中的zoom属性可以让网页实现IE7中的放大缩小功能。
比如你想让你的网页缩小为原来的一半，那么就在body中加入style=“zoom:0.5”