您的位置：首页 > Web前端 > HTML5

HTML5 背景图片自适应屏幕的大小

2015-12-10 16:29 766 查看
在日常的开放中，经常会遇到有背景图片的时候，现在不同屏幕大小的手机又很多，如何让背景图片自适应屏幕的大小了。

在网上搜了很多方法，有的还不一定的能解决问题。如下办法，是我经常使用，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会更合适些。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航