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

 <!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>

 

时间： 2024-07-28 22:18:48

CSS3实现多背景展示效果通过CSS3定位多张背景的相关文章

CSS3 实现六边形Div图片展示效果

原文:CSS3 实现六边形Div图片展示效果 效果图:   实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>visibility: hidden;  也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置   我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的). 最外层div(boxF)旋转120度.第

css3和js网页制作实例:网页头像展示效果

文章简介:今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如鼠标经过的时候而不是切换成一个背景色 今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身也认为对移动设备来讲HTML5是一项重要的技术.而桌面系统的改变也是迟早的事. HTML的一大劣势就是对于多媒体技术支持的缺乏.在HTML中,你无法直接显示一个视频或在屏幕上绘画.在HTML5中,随着<video>与<canvas>元素的引进.这些元素给予开发者直接使用"纯粹

css3实现色子自动翻转效果

原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div>

Css3制作变形与动画效果_表单特效

下面通过图文并茂的方式给大家展示下css3制作变形与动画效果 css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 下面介绍:过渡transition. 一.例子 先通过一个例子感性认识一下transition的动画效果. 鼠标放上去,div宽度从100px增大到200px. <style type="text/css"> div{ width: 100px; height: 100px; background-

CSS3下的渐变文字效果实现

核心提示:CSS3下的渐变文字效果实现 一.方法一:借助mask-image属性 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: 天赐美妞  与HTML相对应的CSS代码如下: .text-gradient {display: inline-block;font-family: ´微软雅黑´;font-size: 10em;position: relative;} .text-gradient[data-text]::a

css3的图形3d翻转效果应用示例

css3的图形3d翻转效果应用示例  代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>css3 3d rotate</title> <style type="text/css&quo

CSS3实战开发:使用CSS3实现photoshop的过滤效果

原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果. 首先我们先在网页中显示一张图片,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="s

CSS3实现8种Loading效果【第二波】

原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊重一下作者! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span&