background-attachment: fixed在现代浏览器中常被静默降级为scroll，主因是ios safari和chrome 99+主动禁用：非根元素、父容器含transform/filter、overflow干扰或层叠上下文触发均会导致失效。
background-attachment: fixed 在现代浏览器里经常“不生效”，不是你写错了，而是它被浏览器静默降级为 scroll —— 尤其在移动端、嵌套容器或用了 transform/filter 的场景下。真想让背景图固定不动、内容滚动，得先绕开这些坑。
为什么 background-attachment: fixed 明明写了却没效果
浏览器（尤其是 iOS Safari 和 Chrome 99+）会主动禁用该属性，只要满足以下任一条件：
- 背景图设在非
body或html的元素上（比如.hero或.section） - 父容器有
transform（哪怕只是translateZ(0)）、filter、will-change或perspective - 页面启用了
overflow: hidden或滚动容器不是根层（如div自带overflow-y: scroll） - DevTools 的 Computed 面板里看到
background-attachment实际值是scroll，说明已被覆盖
只对 body 设 fixed 背景的实操要点
这是最稳定、兼容性最好的方案，但必须配合几个硬性条件：
-
body必须设height: 100vh且margin: 0，否则视口高度不准，背景会拉伸或留白 -
background-image必须直接写在body上，不能靠伪元素或子容器继承 - 配套四件套缺一不可：
background-size: cover、background-position: center、background-repeat: no-repeat、background-attachment: fixed - 避免给
html或body加transform或filter—— 连opacity: 0.99都可能触发降级
替代方案：用 background-position + calc() 模拟视差（纯 CSS，无 JS）
这个方法不依赖 fixed，兼容性更好，适合需要在任意容器内实现视差的场景：
- 把背景图放在目标区块（如
.parallax-section），设background-attachment: scroll（显式声明，防继承干扰） - 用
background-position: center calc(50% + 0.3 * (100vh - 100%))让背景随滚动缓慢位移；系数0.3控制强度，越小越“远” - 注意单位统一：
calc()里别混用px和vh，推荐全用%或vh - Safari 15.4+ 才支持这种写法，旧版需 JS fallback；Chrome/Firefox 支持良好
真正跨端可控的方案：CSS @scroll-timeline（Chrome 115+ / Safari 17.4+）
这是目前唯一原生、声明式、高性能的滚动驱动方案，但必须接受兼容性现实：
- 关键配置三要素：
@keyframes定义background-position变化、animation-timeline: scroll()绑定滚动轴、animation-range: 0% 100%控制区间 - 滚动容器必须加
contain: layout style paint，否则动画卡顿或跳帧 - 仅支持 Y 轴，且默认绑定最近可滚动祖先 —— 无法指定某个
div作为滚动源（scroll(anchor)语法尚未普及） - 检测支持性：
CSS.supports('animation-timeline', 'scroll()')，不支持时 fallback 到 JS 方案
真正难的不是写一行 background-attachment: fixed，而是判断它在哪种上下文里会被浏览器“悄悄关掉”。很多失效不是代码问题，是层叠上下文、滚动容器层级、甚至移动端策略导致的——查 Computed 值比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
