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来绘制一个月食图案
Jul 18 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 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
Apache设置虚拟WEB
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JS的数组迭代方法
2015/02/05 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
js获取ip和地区
2017/03/10 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
社区先进事迹材料
2014/05/19 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
学校个人对照检查材料
2014/08/26 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
管理失职检讨书
2015/05/05 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python