WaterWave

本文转载于: 猿2048 网站 https://www.mk2048.com/blog/blog.php?id=j2ck2j&title=%5B%E8%BD%AC%5D%E6%BB%9A%E5%8A%A8%E8%A7%86%E5%B7%AE%EF%BC%9FCSS+%E4%B8%8D%E5%9C%A8%E8%AF%9D%E4%B8%8B%2Fbackground+attachment 何为滚动视差 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二： 认识 background-attachment background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。 background-attachment ：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 background