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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 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 读取文件乱码问题
2010/02/20 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python实现自动更换ip的方法
2015/05/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python线程池如何使用
2020/05/28 Python
python中判断文件结束符的具体方法
2020/08/04 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
高中生操行评语
2014/04/25 职场文书
爱情保证书大全
2014/04/29 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
24年收藏2000多部退役军用电台
2022/02/18 无线电
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers