今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思，于是就做了一个，demo链接http://1.liwenyang.applinzi.com/index.html
大多数的视差滚动效果都是使用js来实现的，实际上，如果你对兼容性要求不是很高，比方说忽略IE浏览器，则我们使用简单的几行CSS代码就可以实现视差滚动效果了。
css有一个background-attachment属性
作用是设置背景图像是否固定或者随着页面的其余部分滚动。
这里要注意任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
上代码
结构超级简单，用到的文字是00后小诗人姜二嫚的，哈哈，真的很不错
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css视差滚动</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body> <div class="box">
<div class="flowImage fixed-bg bg1">
<p>
这个西红柿死了吗<br>
可是它的颜色<br>
还像鲜花一样奔放
</p>
</div>
<div class="flowImage fixed-bg bg2">
<p>为了跳到天上<br>
月亮先爬到树上。
</p>
</div>
<div class="flowImage fixed-bg bg3">
<p>
晚上<br>
我打着手电筒散步<br>
累了就拿它当拐杖<br>
我拄着一束光
</p>
</div>
<div class="flowImage fixed-bg bg4">
<p>
我是在摸一颗星星<br>
因为地球<br>
也是一颗星星
</p>
</div>
<div class="flowImage fixed-bg bg5">
<p>
我在家等爸爸妈妈<br>
我饿了<br>
这时飞来一只金龟子<br>
可能金龟子也饿了
</p>
</div>
<div class="flowImage fixed-bg bg6">
<p>
每当见到加油站<br>
我就在心里大声地喊<br>
加油加油加油<br>
也不知为了谁
</p>
</div>
</div> </body>
</html>
css
body, html {
height: 100%;
margin:;
padding: 0
}
.box {
height: 100%;
position: relative;
z-index:;
}
.flowImage {
position: relative;
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index:;
background-attachment: fixed; //划重点！！！
}
.flowImage>p {
margin:;
position: absolute;
top: 50%;
left: 10%;
color: #fff;
font-size: 30px;
transform: translate(-10%, -50%);
}
.bg1 {
background-image: url(images/1.jpg);
}
.bg2:nth-child(2) {
background-image: url(images/2.jpg);
}
.bg3:nth-child(3) {
background-image: url(images/3.jpg);
}
.bg4:nth-child(4) {
background-image: url(images/4.jpg);
}
.bg5:nth-child(5) {
background-image: url(images/5.jpg);
}
.bg6:nth-child(6) {
background-image: url(images/6.jpg);
}
搞定收工