文档章节

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

突然很想飞
 突然很想飞
发布于 2015/12/10 16:29
字数 258
阅读 25859
收藏 3

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

        在网上搜了很多方法,有的还不一定的能解决问题。如下办法,是我经常使用,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
作品 0
南京
私信 提问
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
HTML5游戏开发(四):飞机大战之显示场景和元素

《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学...

wildfirecode13
10/29
0
0
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
08/29
0
0
10 个旨在美化网站的 HTML5 滑块设计

现在,网站变得更优雅生动,引入了大量的动画和活动的内容——这得益于商业设计的创新。几年前的网页羞涩无趣,其上面的内容静止而乏味。因为滑块的使用这些状况已然改变。现代风格的设计模式...

oschina
2013/09/05
5.5K
10

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot与pageHelper版本问题

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.6.RELEASE</version></parent> <dependency>......

WALK_MAN
3分钟前
0
0
PHP开发支付宝微信个人免签支付接口实例

这是一个PHP开发支付宝微信个人免签支付接口实例,支付宝微信即时到帐接口,使用原生支付宝即时到帐接口修改而来,即可实现多接口收款功能,开发只需要按照支付宝即时到帐接口开发即可,减少...

sucaihuo
8分钟前
1
0
《孩子,你慢慢来》的读书笔记与读后感2600字

《孩子,你慢慢来》的读书笔记与读后感2600字: 龙——保护儿童的思维: 今天读《孩子,你慢慢来》龙这一节,安安的妈妈是中国人,她在安安两岁的时候就认识到安安有着固执的个性。安安正是处...

原创小博客
20分钟前
2
0
kubernetes每个节点创建一个服务的Pod

1. 问题场景 希望一个worker节点上仅部署同样的服务一个. 比如: kubernets有三个worker节点,三个节点部署N个副本的api服务, 为了提高服务效率希望加入缓存,需要为三个节点个部署一个redis服务...

jimmywa
23分钟前
4
0
搭建Git服务器

Git本身是没有服务器和客户端的区别,但是如果我们要共享git仓库时,就需要ssh、http,它们就有服务器和客户端的区别。 Windows平台下搭建Git服务器 1、在自己电脑搭建Git服务器,且只有自己...

国仔饼
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部