纯css实现多重炫酷背景

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-11-09 20:13:06　-　阅:　-　评:2　-　积分:0

适用范围：已开通/未开通旺铺CSS的B/C店！

双11是越来越近，做淘宝的也是越来越忙。上午看到一家做淘宝的店主猝死，突然间自己感到很害怕。尼马，这年纪青青的，就这么加班给累死了也太不值了吧。心中万个不想加班啊！！！但是，，，还是要加班。趁着现在还没有猝死，赶紧发篇文章。

洒家是今年8月中旬时接触淘宝的，在磨合期那段时间也是很苦逼的。一天看到一家装修的很牛b的淘宝店铺,链接地址：http://octal.taobao.com/，效果图：

当时看到此图，洒家惊呆了。没想到背景还能这样玩，自叹自己见识的少啊。略看了下源码，自己便把图片都保存了下来，在公司的店铺里面进行了测试，一会儿就弄出来了。哈哈！这个看上去已经是1个月前的事情了，但文章一直没有发布，今天抽空来发布下。源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现多重炫酷背景----艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="c店多重背景特效,视差滚动,纯css特效,背景特效,炫酷特效,淘宝店铺装修,特效源码">
<style type="text/css">
*{margin:0;padding:0;}
.user-qp{position:absolute;left: 50%;width: 1920px;height: 100%;margin-left:-960px;text-align:center;}
</style>
</head>
<body>
<!--复制开始-->
<div style="height:7549px;position:relative;overflow:hidden;">
　<div class="user-qp" style="background:url(/d/file/div/2013-11-09/bg.jpg) no-repeat 0 0 fixed;height:7549px;">
　　<div class="user-qp" style="background:url(/d/file/div/2013-11-09/bg2.gif) no-repeat 0 0 fixed;">
　　  <div style="padding-top:90px;"><img src="/d/file/div/2013-11-09/0.png"/></div>
　　  <div style="padding-top:90px;"><img src="/d/file/div/2013-11-09/0.1.png" /></div>
　　  <div style="background:url(/d/file/div/2013-11-09/1.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　  　<div style="background:url(/d/file/div/2013-11-09/2.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　　  <div style="background:url(/d/file/div/2013-11-09/3.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　　  <div style="background:url(/d/file/div/2013-11-09/4.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　　  <div style="background:url(/d/file/div/2013-11-09/5.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　  　<div style="background:url(/d/file/div/2013-11-09/6.png) no-repeat center center fixed;height:1000px;margin-bottom:20px;"></div>
　　</div>
　</div>
</div>
<!--复制结束-->
</body>
</html>

Demo演示点此下载：→→[淘宝特效]纯css实现多重炫酷背景（带c店）.zip　　

无论是c店还是天猫店，无论是付费商家还是未付费商家都是可以实现的，别忘记了，前面有分享过全屏模板框架的哦！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-11-09/112.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！