background-attachment: fixed 使背景图固定于视口，但仅对可滚动元素生效，受父级 transform 等影响易失效；需配合 background-image 和明确高度，移动端需 fallback 至 scroll 并注意兼容性。
background-attachment: fixed 会让背景图“粘在视口上”
用 background-attachment: fixed 后，背景图不再随元素内容滚动，而是相对于浏览器窗口固定——就像给页面加了一层不会动的玻璃贴图。但要注意：它只对「有滚动行为的元素」生效，且受父级 transform、perspective、Filter 等属性影响，可能直接失效。
- 必须配合
background-image使用，单独设fixed没效果 - 元素本身需有明确高度（比如
height: 100vh），否则背景区域不可见 - 在 ios safari 和部分安卓 webview 中，
fixed可能被忽略或触发回弹抖动，实际项目中建议加-webkit-background-attachment: fixed - 如果父容器设置了
transform: translateZ(0)或will-change: transform，会创建新的层叠上下文，导致fixed退化为scroll
background-attachment: local 才是真正“跟内容一起滚”的选项
很多人误以为 fixed 是唯一“固定”方案，其实 local 才能实现背景图随内容滚动时同步位移（比如长文本里带纹理背景，滚动时纹理不跳变）。而默认值 scroll 是背景图随元素整体滚动，但不随内部内容滚动——这容易造成错觉。
-
scroll：背景图绑定到元素盒模型，元素滚动时背景不动；内部子内容滚动，背景也不动 -
local：背景图绑定到元素的内容区，子内容滚动时，背景图跟着内容“滑过去” -
fixed：背景图绑定到视口，无论元素还是内容怎么滚，它都停在屏幕同一位置
div { background-image: url("pattern.png"); background-attachment: local; height: 300px; overflow-y: scroll; }移动端 fallback 必须手动补上 background-attachment: scroll
iOS 15+ 虽已支持 fixed，但旧版 Safari、微信内置浏览器、qq 浏览器等仍大概率忽略它。不能依赖 css 自动降级，得显式覆盖。
- 先写
background-attachment: fixed，再在同一选择器下写background-attachment: scroll（后者会被新浏览器忽略，老浏览器则取后者） - 或者用 @supports 检测：
@supports (background-attachment: fixed)包裹增强样式 - 更稳妥的做法：用 js 检测
matchMedia("(prefers-reduced-motion)")或 UA，动态加 class 控制是否启用 fixed
.hero { background-attachment: fixed; background-attachment: scroll; /* 覆盖老浏览器 */ background-image: url("bg.jpg"); }background-attachment 和 background-position 配合才有真实感
单设 fixed 很容易让背景图居中后“卡死”在顶部，滚动时显得生硬。真正可用的视差效果，需要 background-position 随滚动动态偏移——但这不是 CSS 原生支持的，得靠 JS 或 scroll-driven animations。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 场景下，用
background-position: center calc(50% + 100px)这类计算值可模拟轻微位移，但无法响应滚动 - 要实现滚动越深、背景上移越多的效果，必须监听
scroll事件，动态改backgroundPositionY - 注意性能：避免在 scroll 回调里直接操作 style，优先用
transform: translateY()+will-change或 CSS@keyframes+scroll-timeline（目前仅 chrome/edge 支持）
真正让背景“不滚动”这件事，难点不在写法，而在它和渲染层、滚动机制、移动端兼容性的纠缠。写完 fixed 别急着提交，一定要在真机上拖一拖。