在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。
在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，html代码如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article class="wrap">
<header>
<div class="bg-img">
<img src="img/bg.png" >
</div>
</header>
</article>
</body>
</html>CSS 代码如下：
.wrap {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
}
.bg-img img{
width: 100%;
}此方法的最大的问题是，其后的内容，需要设置属性z-index; 否则其后的内容会在图片之后，而不是覆盖在背景图之上。
最简便的方法如下：
<body style="background-image: url(img/bg.jpg); background-size: 100%;">
</body>只需在body 中设置属性background-size:100% 即可，这种方法也有其缺点。
PS 昨天和同事交流后，background-size 设置为contain会更合适些。
7963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
