版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aaaaaaliang/article/details/78974753
利用background-attachment属性实现视差滚动：
background-attachment:
- scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed: 当页面的其余部分滚动时，背景图像不会移动。
- inherit: 规定应该从父元素继承 background-attachment 属性的设置。
<html>
<head>
<title>background-attachment</title>
<style type="text/css">
div {
width: 100%;
height: 600px;
background-attachment: fixed;
}
.one {
background-image: url(https://i.ebayimg.com/images/g/wUQAAOSwx-9WxLX3/s-l500.webp);
}
.two {
background-image: url(https://i.ebayimg.com/images/g/RlgAAOSwa~BYVqgy/s-l500.webp);
}
.three {
background-image: url(https://i.ebayimg.com/images/g/nq4AAOSwPgxVNndi/s-l500.webp);
}
.third {
background-image: url(https://i.ebayimg.com/images/g/wrIAAOSwezVWvQ7x/s-l500.webp);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="third"></div>
</body>
</html>利用动态改变元素位置实现视差滚动
仅仅用background-attachment实现的视差滚动比较生硬，实际项目中会动态微调元素的背景位置是的视差滚动效果更生动。
具体效果: http://www.firewatchgame.com/