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

用js模拟JQuery的show与hide动画函数代码

Sep 20 Javascript

JavaScript中的几个关键概念的理解-原型链的构建

May 12 Javascript

Chrome下ifame父窗口调用子窗口的问题示例探讨

Mar 17 Javascript

js+css绘制颜色动态变化的圈中圈效果

Jan 27 Javascript

用canvas 实现个图片三角化（LOW POLY）效果

Feb 18 Javascript

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

Aug 17 Javascript

AngularJS实现使用路由切换视图的方法

Jan 24 Javascript

微信小程序图片横向左右滑动案例

May 19 Javascript

[js高手之路]图解javascript的原型(prototype)对象,原型链实例

Aug 28 Javascript

element-ui使用导航栏跳转路由的用法详解

Aug 22 Javascript

vue实现图片上传功能

May 28 Javascript

浅析JavaScript中的事件委托机制跟深浅拷贝

Jan 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

蝙蝠侠：侠影之谜

2020/03/04 欧美动漫

thinkPHP中volist标签用法示例

2016/12/06 PHP

java解析json方法总结

2019/05/16 PHP

Laravel 前端资源配置教程

2019/10/18 PHP

JS 获取span标签中的值的代码支持ie与firefox

2009/08/24 Javascript

JQuery中根据属性或属性值获得元素(6种情况获取方法)

2013/01/17 Javascript

深入分析下javascript中的[]()+!

2015/07/07 Javascript

DEDECMS如何为文章添加HOT NEW标志图片

2015/08/14 Javascript

ReactJs快速入门教程(精华版)

2016/11/28 Javascript

javascript循环链表之约瑟夫环的实现方法

2017/01/16 Javascript

jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】

2017/03/10 Javascript

js HTML5 canvas绘制图片的方法

2017/09/08 Javascript

VUE-Table上绑定Input通过render实现双向绑定数据的示例

2018/08/27 Javascript

用Cordova打包Vue项目的方法步骤

2019/02/02 Javascript

微信小程序云开发之使用云函数

2019/05/17 Javascript

vue-next/runtime-core 源码阅读指南详解

2019/10/25 Javascript

微信小程序实现录音功能

2019/11/22 Javascript

node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例

2020/02/11 Javascript

VSCode搭建React Native环境

2020/05/07 Javascript

vue配置多代理服务接口地址操作

2020/09/08 Javascript

树莓派中python获取GY-85九轴模块信息示例

2013/12/05 Python

Python计算程序运行时间的方法

2014/12/13 Python

Python首次安装后运行报错(0xc000007b)的解决方法

2016/10/18 Python

Python中元组,列表,字典的区别

2017/05/21 Python

Pycharm无法使用已经安装Selenium的解决方法

2018/10/13 Python

通过python3实现投票功能代码实例

2019/09/26 Python

解决python3插入mysql时内容带有引号的问题

2020/03/02 Python

HTML5中的postMessage API基本使用教程

2016/05/20 HTML / CSS

Nike香港官网：Nike HK

2019/03/23 全球购物

大学生就业自荐信

2013/10/26 职场文书

采购求职信

2014/03/17 职场文书

英文推荐信格式范文

2014/05/09 职场文书

优秀团员事迹材料1000字

2014/08/20 职场文书

2014年党小组工作总结

2014/12/20 职场文书

2015元旦感言

2015/12/09 职场文书

golang三种设计模式之简单工厂、方法工厂和抽象工厂

2022/04/10 Golang