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来实现滚动视差效果的教程
Aug 24 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 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 STRING 陷阱原理说明
2010/07/24 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
解析PHP的session过期设置
2013/06/29 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
js实现轮播图特效
2020/05/28 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
python dlib人脸识别代码实例
2019/04/04 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python如何进行矩阵运算
2020/06/05 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
小英雄雨来观后感
2015/06/09 职场文书
追悼会悼词大全
2015/06/23 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers