background-attachment: fixed 失效主因是父容器触发层叠上下文（如transform、filter）或ios safari/android webview主动禁用；需搭配background-repeat: no-repeat、显式background-position和background-size: cover，并优先用伪元素+position: fixed替代。
background-attachment 设为 fixed 就能让背景图“视觉上”固定在视口不动，不随页面滚动——但实际效果受容器、层级和浏览器行为影响，不是无条件生效。
为什么加了 background-attachment: fixed 还在动？
常见原因不是写错了，而是它只对「根元素或特定定位上下文」真正稳定：
-
background-attachment: fixed的参照系是视口（viewport），不是父容器；所以如果应用在div上，而该div本身有transform、perspective或will-change，现代浏览器会强制降级为scroll行为（Chrome/Firefox 均如此） - 在 iOS Safari 和部分 Android WebView 中，
fixed对非body元素支持不稳定，常被忽略 - 如果
body没有显式高度（比如靠内容撑开），且html未设height: 100%，fixed可能表现异常 -
background-attachment: fixed在position: sticky或overflow: hidden容器内也会失效
background-attachment: fixed 必须搭配的三项设置
单独写 fixed 很容易白忙活，这三项缺一不可：
-
background-repeat: no-repeat：避免小图重复后形成“错觉位移” -
background-position显式指定，如center center或top right；否则默认0 0可能在高 DPI 屏幕下偏移 -
background-size: cover或contain：防止图片缩放后边缘露白，同时强化“固定感”
推荐写法示例：
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
替代方案：background-attachment: local 是什么场景用？
它让背景图随「元素内部滚动」而动，不是随页面，也不是完全固定——适用于带 overflow: auto 的长内容容器：
- 比如一个
max-height: 400px、overflow-y: scroll的卡片，你想让它的背景图随卡片内文字滚动，而不是锁死在视口 -
local在 Firefox 支持良好，Chrome 自 99+ 也已稳定，但 IE 完全不支持 - 注意：
local和fixed互斥，不能同时设；且若容器没发生内部滚动（即没出现滚动条），local表现等同于scroll
移动端真机调试最容易忽略的一点
iOS Safari 会忽略 background-attachment: fixed，除非你额外加一行：
- 给
body加-webkit-transform: translateZ(0)（触发硬件加速） - 或者更稳妥地，用
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;单独抽一个div当背景层，再用img或伪元素承载图片
后者虽多写几行 CSS，但兼容性确定，且可自由控制缩放、模糊等效果，比纯 background 属性更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
