文档章节

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

突然很想飞
 突然很想飞
发布于 2015/12/10 16:29
字数 258
阅读 22913
收藏 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
超级绚丽,20款前端动画特效,轰炸你的眼睛

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

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

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

wewelove
2014/08/08
0
0
HTML 使用CSS 设置透明度Opacity

HTML/CSS标签透明度效果的实现 在HTML+CSS编程中,实现半透明背景,通常有3中做法,分别是使用RGBA,PNG和CSS filter。 方法一. 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H...

IamOkay
2014/11/16
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++ gflags

gflags是google一个开源的处理命令行参数的库,相比getopt,更加容易使用。 定义参数 gflags主要支持的参数类型包括 DEFINEbool: boolean DEFINEint32: 32-bit integer DEFINEint64: 64-bit ...

SibylY
28分钟前
0
0
intellij IDEA Properties中文unicode转码问题

在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码。如下 在project settings - File Encoding,在标红的选项上打上勾,确定即可 效果图如下: unicode转码后效果...

muzi1994
29分钟前
0
0
Java IO类库之PipedWriter

一、PipedWriter介绍 PipedWriter是字符管道输出流,继承自Writer,功能与PipedOutputStream类似,通过与PipedReader组合使用实现类似管道的功能,在多线程环境下,一个线程使用PipedWriter...

老韭菜
33分钟前
0
0
精简分页组件(手写)

需要引入CSS(没错就是这4行) .pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }.pagelist a { color: #666; margin: 0 2px;......

AK灬
34分钟前
3
0
29 岁成为阿里巴巴 P8,工作前 5 年完成晋升 3 连跳,他如何做到?

泡泡是我的好朋友。今年 31 岁,毕业后就进了阿里巴巴,工作五年内从 P4 晋升至 P6、P7、P8。 和他很少聊到工作,但总觉得他有很棒的职场心得,应该分享出来,于是有了这次采访。希望对职场新...

Java填坑之路
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部