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中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python类的继承和多态代码详解
2017/12/27 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
数学专业推荐信范文
2013/11/21 职场文书
好军嫂事迹材料
2014/01/15 职场文书
争论的故事教学反思
2014/02/06 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
房屋产权证明书
2014/10/15 职场文书
新郎结婚保证书
2015/02/26 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript