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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 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
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php输出图像的方法实例分析
2017/02/16 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Python import自定义模块方法
2015/02/12 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
教室标语大全
2014/06/21 职场文书
社会学专业求职信
2014/07/17 职场文书
表扬通报怎么写
2015/01/16 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis