深入理解 "background-attachment:fixed"：为何你的背景图没有固定住？

我希望为页面添加背景图，并使其在页面滚动时保持固定，而不是随着内容一同滚动。基于这个需求，我自然地使用了 background-attachment: fixed;，但结果却未达到预期效果。经过排查和深入分析，我总结了几点关键的注意事项。

直接设置 background-attachment: fixed 无效？

最初，我将背景图动态绑定在某个容器元素上，并通过主题配置动态切换背景图样式。在样式中直接声明了background-attachment: fixed;

理论上，这应该让背景图固定在视口中。然而在实际效果中，背景图仍然会随着页面内容滚动，未实现“视差”滚动或固定背景的效果。

理解滚动上下文与背景固定机制

要理解问题的根本，需要了解 background-attachment: fixed 的工作机制。

该属性的语义是：背景图相对于视口固定。也就是说，当页面内容滚动时，背景图应保持静止。然而，它的生效前提是——应用该样式的元素必须参与滚动上下文。

在大多数浏览器中，默认的滚动容器是 html 或 body 元素。如果你在某个自定义容器上设置了 background-attachment: fixed，但该容器本身不是滚动容器（即未设置 overflow: auto 或 overflow: scroll），则浏览器不会将其视作有效的滚动上下文，导致该属性失效。

确保目标元素是滚动容器

为了让 background-attachment: fixed 正常生效，必须满足以下两个条件：

• 背景图应用在支持滚动的元素上
  • 该元素必须设置了 overflow: auto 或 scroll，并且具有可滚动内容。
• 该元素确实参与了页面的滚动行为
  • 如果页面滚动依旧由 body 或 html 控制，设置在其他元素上的 background-attachment: fixed 将不会生效。

例如：

.scroll-wrapper {
  height: 100vh;
  overflow: auto;
  background-image: url('/background.png');
  background-attachment: fixed;
  background-size: cover;
}

确保 .scroll-wrapper 才是页面的主要滚动容器，背景固定才能生效。

⸻

总结

background-attachment: fixed 的常见误区在于忽视了“滚动上下文”的必要性。背景图是否固定，并不仅仅取决于样式本身，还与该样式应用在哪个元素上、该元素是否具有滚动行为密切相关。

理解这一点，有助于我们在实际开发中更加灵活、准确地实现视差背景、页面固定背景等视觉效果。