CSS3实现多背景展示效果通过CSS3定位多张背景


Posted in HTML / CSS onAugust 10, 2014

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3实现多背景展示</title>
</head>
<body>
<div style="height:5400px;">

<div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_fff653c539e10000015c06f796e0.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>
   <div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_dfff53c539e40000015c06f6ff04.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>

<div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_0b3d53ce00b100000174d030a1fd.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>

<div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_c24d53ce007300000174d0debb3e.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>

<div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_606453ce006500000174d00396f9.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>
   <div style="background:url(http://zcimg.zcool.com.cn/zcimg/m_71fe53ce005e00000174d0000ac0.jpg) no-repeat center center fixed;height:880px;margin-bottom:10px;"></div>

</div>
</body>
</html>


通过css3定位多张背景并且使用固定属性。
HTML / CSS 相关文章推荐
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 #HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 #HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 #HTML / CSS
You might like
PHP环境搭建最新方法
2006/09/05 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
详解Golang 与python中的字符串反转
2017/07/21 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
什么是网络协议
2016/04/07 面试题
九年级数学教学反思
2014/02/02 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
刮痧观后感
2015/06/05 职场文书
数据库连接池
2021/04/06 MySQL
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python