编程 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 相关文章推荐

自动生成文章摘要的代码[JavaScript 版本]

Mar 20 Javascript

javascript+dom树型菜单类，希望朋友们一起进步

May 03 Javascript

AeroWindow 基于JQuery的弹出窗口插件

Jun 27 Javascript

arguments对象验证函数的参数是否合法

Jun 26 Javascript

js阻止浏览器默认行为的简单实例

May 15 Javascript

浅谈JS中的三种字符串连接方式及其性能比较

Sep 02 Javascript

JS中Array数组学习总结

Jan 18 Javascript

微信小程序开发之路由切换页面重定向问题

Sep 18 Javascript

countUp.js实现数字动态变化效果

Oct 17 Javascript

js中的面向对象之对象常见创建方法详解

Dec 16 Javascript

Node.js API详解之 tty功能与用法实例分析

Apr 27 Javascript

如何开发一个渐进式Web应用程序PWA

May 10 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 memcache扩展的三种安装方法

2009/04/26 PHP

php 模拟get_headers函数的代码示例

2013/04/27 PHP

PHP把数字转成人民币大写的函数分享

2014/06/30 PHP

ThinkPHP中I(),U(),$this->post()等函数用法

2014/11/22 PHP

php设计模式之备忘模式分析【星际争霸游戏案例】

2020/03/24 PHP

JavaScript DOM 学习第九章选取范围的介绍

2010/02/19 Javascript

JS制作简单的三级联动

2015/03/18 Javascript

Bootstrap开发实战之响应式轮播图

2016/06/02 Javascript

vue2.0开发实践总结之入门篇

2016/12/06 Javascript

jQuery EasyUI Panel面板组件使用详解

2017/02/28 Javascript

ZeroClipboard.js使用一个flash复制多个文本框

2017/06/19 Javascript

去掉vue 中的代码规范检测两种方法(Eslint验证)

2018/03/21 Javascript

JS实现字符串去重及数组去重的方法示例

2018/04/21 Javascript

webpack HappyPack实战详解

2019/10/08 Javascript

[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

python连接MySQL、MongoDB、Redis、memcache等数据库的方法

2013/11/15 Python

python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件

2014/08/15 Python

Python类的用法实例浅析

2015/05/27 Python

使用python实现省市三级菜单效果

2016/01/20 Python

深入学习Python中的装饰器使用

2016/06/20 Python

Python中操作mysql的pymysql模块详解

2016/09/13 Python

python学生信息管理系统

2018/03/13 Python

Python常见数据类型转换操作示例

2019/05/08 Python

python简单鼠标自动点击某区域的实例

2019/06/25 Python

tensorflow使用指定gpu的方法

2020/02/04 Python

python实现简单飞行棋

2020/02/06 Python

浅谈keras2 predict和fit_generator的坑

2020/06/17 Python

Python依赖包迁移到断网环境操作

2020/07/13 Python

python实现快速文件格式批量转换的方法

2020/10/16 Python

个性化皮包、小袋、生活配件：Mon Purse

2019/03/26 全球购物

Paradox London官方网站：英国新娘鞋婚礼鞋品牌

2019/08/29 全球购物

采购内勤岗位职责

2013/12/10 职场文书

人力资源部培训专员岗位职责

2014/01/02 职场文书

武侯祠导游词

2015/02/04 职场文书

家长会感言

2015/08/01 职场文书

2019最新校园运动会广播稿！

2019/06/28 职场文书