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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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和ACCESS写聊天室(六)
2006/10/09 PHP
php实现天干地支计算器示例
2014/03/14 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php中错误处理操作实例分析
2019/08/23 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
详解vue 命名视图
2019/08/14 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
python版本五子棋的实现代码
2018/12/11 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
华三通信H3C面试题
2015/05/15 面试题
幼师自我鉴定范文
2013/10/01 职场文书
关于期中考试的反思
2014/02/02 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
授权委托书
2014/07/31 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
安徽导游词
2015/02/12 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android