视差滚动效果近年来很受大家的欢迎，但实现这个功能一般都需要javaScript，而且实现做起来有一定的难度。就这个问题，我们跟大家分享另外一种比较简单的视差滚动效果技术，只需要CSS就可以实现了。一起来看看吧。
演示
该滚动效果特点是使用固定背景与色块内容交替，当访客向下滚动时，背景是fixed固定的，具体请查看：在线演示
从上图可以看出，内容向上滚动时，第一张背景是固定的，不会跟着向上滚动。即：固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式，从而产生视差效果。
兼容性
IE9+
Firefox
Chrome
Safari
Opera
使用教程
HTML代码
HTML代码结构很清晰，使用main标签包住所有内容，其中.cd-fixed-bg样式就是固定背景，.cd-scroll-bg样式为色块内容。
<main>
<div class="cd-fixed-bg cd-bg-1">
<h1>标题</h1>
</div>
<div class="cd-scrolling-bg cd-color-1">
<div class="cd-container">
<p>
内容...
</p>
</div>
</div>
<div class="cd-fixed-bg cd-bg-2">
<h1>标题</h1>
</div>
<div class="cd-scrolling-bg cd-color-2">
<div class="cd-container">
<p>
内容...
</p>
</div>
</div>
</main>
CSS样式
主要是通过css的background-attachment:fixed定位属性来让背景固定，具体请看下面的样式代码：
body, html, main {
/* important */
height: 100%;
}
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
background-image: url("../img/cd-background-4.jpg");
}
.cd-scrolling-bg {
min-height: 100%;
}
本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司！
