文档章节

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

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

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

浪漫程序员 ⋅ 04/25 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

jQuery文件上传插件Uploadify(转)

一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列。 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用。 由于官方提供的版本是flash免费,html5版本...

easonjim ⋅ 2017/01/05 ⋅ 0

Html5 学习系列(六)Html5本地存储和本地数据库

//Demo:获取或者创建一个数据库,如果数据库不存在那么创建之var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });...

aicoder ⋅ 2014/08/30 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

HTML5存储学习笔记(一)

1.HTML5之前的存储方式 HTML5之前常用的存储方式为cookies。 cookies在浏览器中的存储形态,以百度首页的cookie为例: 【特别说明】 HttpOnly表示该cookie只能被server端修改,client 端不能...

球球 ⋅ 2016/11/13 ⋅ 0

使用canvas在前端实现图片合成

看着总结的不错,我也就拿来主义了,做个记录,侵权必删 图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。 随着HTML5发展和现代浏览器的占比越来越高,...

xllily_11 ⋅ 02/26 ⋅ 0

bootstrap学习笔记--初识bs

参考: https://www.quanzhanketang.com/bootstrap/bootstrapgridbasic.html bootstrap是基于jQuery的前端CSS框架 预定于好了各种CSS类 相当于API接口,直接调用即可使用css样式,方便前端开...

codingcoge ⋅ 05/24 ⋅ 0

HTML5 进阶系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。localStorag...

林鑫 ⋅ 2017/04/26 ⋅ 0

php canvas 前端JS压缩,获取图片二进制流数据并上传

效果图(canvas压缩图片会失真): 参考: php canvas 前端JS压缩,获取图片二进制流数据并上传 https://www.cnblogs.com/-mrl/p/8708114.html js+php如何实现上传图片 https://www.jianshu....

豆花饭烧土豆 ⋅ 05/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 4分钟前 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

OSC_cnhwTY ⋅ 11分钟前 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 13分钟前 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 21分钟前 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 22分钟前 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 51分钟前 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 57分钟前 ⋅ 0

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部