编程 Javascript

HTML中使背景图片自适应浏览器大小实例详解

Posted in Javascript onApril 06, 2017

HTML中使背景图片自适应浏览器大小实例详解

解决办法：

1、图片不够大，又background属性不能拉伸图片；

2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> ；

3、body的background属性去掉，要不然会被遮住。

<html> 
<body> 
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> 
<img src="pictures/background.jpg" width="100%" height="100%"/> 
</div> 
</body> 
</html>

如果想让图片不随浏览器右边滚动条滚动，就用position:fixed属性。wordpress建站的达人们也可以用此方法，在指定页面定制自己的背景图片。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

HTML中使背景图片自适应浏览器大小实例详解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

picChange 图片切换特效的函数代码

May 06 Javascript

原生JavaScript实现Ajax的方法

Apr 07 Javascript

js验证框架实现代码分享

May 18 Javascript

关于axios返回空对象的问题解决

Apr 04 Javascript

移动端触屏幻灯片图片切换插件idangerous swiper.js

Apr 10 Javascript

Bootstrap栅格系统的使用详解

Oct 30 Javascript

深入浅析Vue.js中 computed和methods不同机制

Mar 22 Javascript

JS 验证码功能的三种实现方式

Nov 26 Javascript

vue实现的上拉加载更多数据/分页功能示例

May 25 Javascript

bootstrap datepicker的基本使用教程

Jul 09 Javascript

Vue 实现从文件中获取文本信息的方法详解

Oct 16 Javascript

微信小程序实现modal弹出框遮罩层组件（可带文本框）

Dec 20 Javascript

ES6中的箭头函数实例详解

Apr 06 #Javascript

ES6字符串模板，剩余参数，默认参数功能与用法示例

Apr 06 #Javascript

详谈js遍历集合(Array,Map,Set)

Apr 06 #Javascript

javascript中this用法实例详解

Apr 06 #Javascript

selenium 与 chrome 进行qq登录并发邮件操作实例详解

Apr 06 #Javascript

js遍历获取表格内数据的方法(必看)

Apr 06 #Javascript

JS优化与惰性载入函数实例分析

Apr 06 #Javascript

You might like

PHP的FTP学习(二)

2006/10/09 PHP

PHP4实际应用经验篇(5)

2006/10/09 PHP

PHP生成excel时单元格内换行问题的解决方法

2010/08/26 PHP

php中计算程序运行时间的类代码

2012/11/03 PHP

ThinkPHP3.1新特性之对Ajax的支持更加完善

2014/06/19 PHP

PHP使用strstr()函数获取指定字符串后所有字符的方法

2016/01/07 PHP

php插入含有特殊符号数据的处理方法

2016/11/24 PHP

php mysql数据库操作类(实例讲解)

2017/08/06 PHP

javascript 动态生成私有变量访问器

2009/12/06 Javascript

JS自调用匿名函数具体实现

2014/02/11 Javascript

JavaScript合并两个数组并去除重复项的方法

2015/06/13 Javascript

jQuery实现调整表格单列顺序完整实例

2016/06/20 Javascript

D3.js中强制异步文件读取同步的几种方法

2017/02/06 Javascript

微信小程序自动登陆PHP源码实例（源码下载）

2017/05/08 Javascript

webpack打包nodejs项目的方法

2018/09/26 NodeJs

Node.JS获取GET,POST数据之queryString模块使用方法详解

2020/02/06 Javascript

原生JavaScript之es6中Class的用法分析

2020/02/23 Javascript

JavaScript语句错误throw、try及catch实例解析

2020/08/18 Javascript

微信小程序连续签到7天积分获得功能的示例代码

2020/08/20 Javascript

VSCode插件安装完成后的配置(常用配置)

2020/08/24 Javascript

浅谈vue.watch的触发条件是什么

2020/11/07 Javascript

基于vuex实现购物车功能

2021/01/10 Vue.js

Python实现自动为照片添加日期并分类的方法

2017/09/30 Python

利用numpy实现一、二维数组的拼接简单代码示例

2017/12/15 Python

Python实例方法、类方法、静态方法区别详解

2020/09/05 Python

python批量生成身份证号到Excel的两种方法实例

2021/01/14 Python

台湾SHOPRO购物行家：亚洲首创影视．3C．家电．优质购物平台

2018/05/07 全球购物

美国领先的男士和女士内衣购物网站：Freshpair

2019/02/25 全球购物

包装类的功能、种类、常用方法

2012/01/27 面试题

关于Assembly命名空间的三个面试题

2015/07/23 面试题

高效课堂标语

2014/06/26 职场文书

公司领导九九重阳节发言稿2014

2014/09/25 职场文书

校园广播稿100字

2014/10/06 职场文书

交通事故被告答辩状

2015/05/22 职场文书

MySQL 常见存储引擎的优劣

2021/06/02 MySQL

MySQL里面的子查询的基本使用

2021/08/02 MySQL