CSS3实现视差滚动效果

HTML部分：

<section class="g-img1">IMG1</section>
<section class="g-img2">IMG2</section>

CSS部分主要通过background-attachment: fixed;来实现视差滚动，根据实际需求设置相应的背景大小，这里用的是background-size: cover;

<style type="text/css">
section {
height: 100vh;
background: rgba(0, 0, 0, .7);
color: #fff;
text-align: center;
}

.g-img1 {
background-image: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

.g-img2 {
background-image: url('https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=');
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

</style>