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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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数组函数
2008/08/18 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
javascript 播放器 控制
2007/01/22 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python日志模块logbook使用方法
2019/09/19 Python
python连接mysql有哪些方法
2020/06/24 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
优秀三好学生事迹材料
2014/08/31 职场文书
个人创业事迹材料
2014/12/30 职场文书
个人自荐书怎么写
2015/03/26 职场文书
2015年库房工作总结
2015/04/30 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
遗愿清单观后感
2015/06/09 职场文书
升职自荐书
2019/05/09 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL