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实现Material Design效果
Mar 09 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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邮件类
2007/01/03 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
js对象的比较
2011/02/26 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
小程序实现横向滑动日历效果
2019/10/21 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
银行开业庆典方案
2014/02/06 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
会议欢迎词
2015/01/23 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
python字符串的多行输出的实例详解
2021/06/08 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js