HTML5 背景图片自适应屏幕的大小
HTML5 背景图片自适应屏幕的大小
突然很想飞 发表于2年前
HTML5 背景图片自适应屏幕的大小
  • 发表于 2年前
  • 阅读 15906
  • 收藏 3
  • 点赞 2
  • 评论 0
摘要: 如何让背景图片自适应屏幕的大小

        在日常的开放中,经常会遇到有背景图片的时候,现在不同屏幕大小的手机又很多,如何让背景图片自适应屏幕的大小了。

        在网上搜了很多方法,有的还不一定的能解决问题。如下办法,是我经常使用,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会更合适些。

共有 人打赏支持
粉丝 0
博文 4
码字总数 1595
×
突然很想飞
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: