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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Django实现文件上传和下载功能
2019/10/06 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python Http请求json解析库用法解析
2020/11/28 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
在校实习生求职信
2014/06/18 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python访问Redis的详细操作
2021/06/26 Python
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python