background-attachment: scroll 是默认值，使背景图随元素滚动而同步移动；fixed 使背景固定于视口，local 则随元素内容滚动，三者作用对象不同。
background-attachment: scroll 是默认行为，不是“跟随滚动”的问题
很多人搜“背景图跟随内容滚动”，其实是误解了 background-attachment 的作用：它控制的是背景图相对于**视口（viewport）还是元素本身**的定位方式。所谓“跟随滚动”，恰恰是它的默认值 scroll —— 背景图随元素一起滚动，而不是固定在视口上。
真正容易出错的，是误设成 fixed 还没意识到，导致背景图“卡死”在屏幕某处，内容滚走了它还在原地。
-
background-attachment: scroll：背景图绑定在元素盒模型内，元素滚动时背景图同步移动（即“跟随”） -
background-attachment: fixed：背景图绑定在视口，不随元素滚动，常用于视差效果，但不是“跟随” -
background-attachment: local：背景图随元素内容滚动（比如有overflow: auto的容器内文字滚动时，背景也跟着动），兼容性稍弱（IE 不支持）
为什么设置了 background-attachment: scroll 还不“跟随”？
常见原因是父容器或自身触发了层叠上下文或变换上下文，导致背景渲染行为异常。最典型的是：
- 父元素设置了
transform（哪怕只是transform: translateZ(0)），会创建新的包含块，使fixed失效，同时可能干扰scroll的预期表现 - 元素有
will-change: transform或opacity，也可能隐式创建包含块 - 背景图设在伪元素（如
::before）上，但伪元素未设置content: ""或尺寸为 0，导致无渲染区域 - CSS 优先级被覆盖：检查 computed styles，确认最终生效的
background-attachment确实是scroll
local 和 scroll 在可滚动容器里的关键区别
当元素自身可滚动（如 overflow: auto），且你希望背景图随**内部内容滑动**而非整个元素位移时，local 才是正确选择。
.scrollable-box {
height: 200px;
overflow: auto;
background-image: url("pattern.png");
background-attachment: local; /* 内容滚动时，背景图随文字一起动 */
/* background-attachment: scroll; ← 这里只会让背景随 .scrollable-box 容器整体“位移”，内容滚了背景不动 */
}
注意：local 在 Safari 旧版本和 IE 中不支持；若需兼容，可用 JS 模拟滚动偏移，或改用绝对定位 + background-position 动态计算。
移动端 Safari 的 fixed 背景图失效问题
iOS Safari 对 background-attachment: fixed 支持极差（常退化为 scroll），但 scroll 和 local 均正常。如果你本意是做“跟随滚动”的背景，反而在 iOS 上更稳——不用任何 hack。
不过要注意：iOS 中 body 或 html 上设背景图 + fixed，常因系统滚动优化被忽略；稳妥做法是把背景图设在 <main></main> 或具体内容容器上，并确保该容器有明确高度和 overflow 行为。
复杂点往往不在属性本身，而在它所处的渲染上下文——特别是 transform、contain、will-change 这些看不见的“开关”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
