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模块的目前的状况分析
Feb 24 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
css3 选择器
May 11 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 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中json_encode中文编码问题分析
2011/09/13 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python获取Pandas列名的几种方法
2019/08/07 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
环境工程大学生自荐信
2013/10/21 职场文书
面试求职的个人自我评价
2013/11/16 职场文书
公积金单位接收函
2014/01/11 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android