CSS 固定背景的用例

将此归类为个人“CSS 顿悟时刻”。

background-attachment 属性对我来说一直没有那么有用。我一直把它看作是 GeoCities 时代的一种老式设计技巧，用来让重复背景在滚动时保持在原位。

查看 Geoff Graham 在 CodePen 上制作的 QEPQqp 演示。

事实证明，具有固定位置的背景比这更有用。在元素中添加单行 background-attachment: fixed; 实际上可以为我们提供一些功能，使我们能够以一种不会产生其他依赖项（如 JavaScript 或复杂动画）的方式在内容之间进行平滑、优雅的过渡，从而增强用户体验。

模拟幻灯片

正在制作演示文稿吗？将单个页面分成“幻灯片”非常简单。

.slide {
  background-image: url('path-to-url');
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
}

当我们在 HTML 中三次调用 .slide 元素时，这些幻灯片看起来就像页面向下滚动时彼此重叠一样。

查看 Geoff Graham 在 CodePen 上制作的 CSS 中的滚动背景 – 01 演示。

没有库。没有滚动劫持。纯 CSS 具有全面的浏览器支持（好吧，除了触摸屏）。这可能与 CSS 滚动捕捉点 配合使用会很有趣。

“滑过页眉”的页眉

假设我们要使用一些花哨的页眉，内容会覆盖它。我们也可以做到这一点。

查看 Geoff Graham 在 CodePen 上制作的 akrJjY 演示。

模拟透明度

还记得教室里曾经使用 投影仪，老师们必须制作他们称之为透明胶片的材料来展示分层信息吗？我们也可以做到这一点！

查看 Geoff Graham 在 CodePen 上制作的 CSS 滚动背景 – 西雅图之旅 演示。

其他精彩示例

在 CodePen 上还有很多其他精彩的实际应用示例。这里列举几个供您参考。

在文章开头（以及中间）的滑动面板

查看 Shane Zentz 在 CodePen 上制作的 RRJWAA 演示。

倾斜且透明的重叠部分

查看 carpe numidium 在 CodePen 上制作的 skewroll 演示。

滚动翻页书

查看 Derek Palladino 在 CodePen 上制作的 滚动翻页书 演示。

文章中间的背景页眉断点

查看 Sam Stevenson 在 CodePen 上制作的 vKOvgJ 演示。

固定面板内的裁剪页眉

此示例实际上没有使用 background-attachment，但它非常酷，并且效果相关。

查看 Stephen Scaff 在 CodePen 上制作的 Gettin’ Clippy 演示。