文档章节

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

突然很想飞
 突然很想飞
发布于 2015/12/10 16:29
字数 258
阅读 24641
收藏 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从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

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

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

扣丁学堂
08/29
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
8个前沿的 HTML5 & CSS3 效果(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大...

wewelove
2014/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
24分钟前
0
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
1
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
1
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
4
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部