background-attachment 制造视差滚动效果案例
简介
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个：
- scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed 当页面的其余部分滚动时，背景图像不会移动。
- inherit 规定应该从父元素继承 background-attachment 属性的设置。ie 8不支持此属性值。
实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动视觉差示例</title>
<style>
*{
padding:0;
margin:0
}
body{
text-align:center;
background-attachment:fixed;
}
#main{
width: 1280px;
height: 1600px;
padding-top: 200px;
margin:auto
}
.bg-attachment{
height:700px;
background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_6.jpg) center center no-repeat;
box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
-ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
background-attachment:fixed;
}
.div2{
background:url(http://tupian.qqjay.com/u/2013/1127/19_222949_10.jpg) center center no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="main">
<div class="bg-attachment"></div>
<div class="bg-attachment div2"></div>
</div>
</body>
</html>
参考
http://www.cnblogs.com/mofish/archive/2012/12/28/2837622.html
