首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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定位多张背景并且使用固定属性。

CSS3实现多背景展示效果通过CSS3定位多张背景

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 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
tkFileDialog(1) Odoo(1) 批处理(1) SeaTunnel(1) 重复数据(2) NFS(1) Logrotate(1) ftpserver(1) 黑名单(1) T-SQL(1)
You might like
一个简单计数器的源代码
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
newxtree.js代码
2007/03/13 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
vue上传图片到oss的方法示例（图片带有删除功能）
2018/09/27 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Vue实现多页签组件
2021/01/14 Vue.js
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
详解python破解zip文件密码的方法
2020/01/13 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
Space NK美国站：英国高端美妆护肤商城
2017/05/22 全球购物
微软马来西亚官方网站：Microsoft马来西亚
2019/11/22 全球购物
Linux机考试题
2015/07/17 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
三八妇女节标语
2014/10/09 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2015年科协工作总结
2015/05/19 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL