首页
所有分类
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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3贝塞尔曲线示例：创建链接悬停动画效果
Nov 19 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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
OVERLORD(1) 神经网络(7) 数据表(1) 2022年7月新番(1) data(4) mysql(6) 字符集(1) name_scope (1) variable_scope(1) character(1)
You might like
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python Django中间件，中间件函数，全局异常处理操作示例
2019/11/08 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python读取表格类型文件代码实例
2020/02/17 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python入门教程之基本算术运算符
2020/11/13 Python
英国家喻户晓的折扣商场：TK Maxx
2017/05/26 全球购物
Paul Smith英国官网：英国国宝级时装品牌
2019/03/21 全球购物
德国领先的大尺码和超大尺码男装在线零售商：Bigtex
2019/06/22 全球购物
教师求职推荐信范文
2013/11/20 职场文书
征兵宣传标语
2014/06/20 职场文书
学长教您写论文：经验总结
2019/07/09 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL