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文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
js代码实现轮播图
2020/05/04 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python3 元组tuple入门基础
2020/02/09 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
另类冲刺标语
2014/06/24 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
员工辞职信范文
2015/03/02 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis