background-attachment: fixed 不该用于响应式项目，因其在移动端被浏览器静默降级为 scroll，无法响应触控惯性等滚动输入差异，且易受 transform、overflow 等属性破坏，不支持无障碍偏好，位移与滚动距离非线性映射。
background-attachment: fixed 在响应式设计中不能可靠实现背景图视差滚动，尤其在移动端几乎必然失效——这不是写法问题，而是现代浏览器（iOS Safari、Chrome v56+、多数安卓 WebView）主动禁用该行为。
它只在桌面端（Chrome/Firefox/Edge）有基本可用性，且极易被父容器的 transform、overflow: hidden、filter 或 will-change 破坏。别把它当作“响应式方案”，它本质是非响应式遗留属性。
background-attachment: fixed 为什么在响应式项目里不该用
- 它不响应滚动输入源差异：触控惯性滑动、键盘方向键、鼠标滚轮快慢，全被无视，位移永远是离散跳变
- 移动端 DevTools 里看到
background-attachment: fixed声明生效，但 computed 值实际是scroll—— 浏览器静默降级，你根本收不到警告 - 配合
background-size: cover时，因固定锚点与视口对齐，在横屏/缩放/字体放大等响应式场景下，背景图易裁剪或偏移失准 - 无法与
prefers-reduced-motion或深色模式等系统偏好联动，无障碍支持硬伤
用 background-position + window.scrollY 模拟视差（兼容所有设备）
这是目前最可控、全平台可用的响应式替代方案：
- 必须显式写
background-attachment: scroll，避免继承干扰 - JS 中用
requestAnimationFrame包裹 scroll 回调，防止卡顿 - 视差系数建议取
0.2～0.6，例如：backgroundPosition = 'center ' + (window.scrollY * 0.4) + 'px' - 背景图尺寸至少为容器宽高的 1.5 倍；
background-size: cover可用，但需确保图像足够大，否则滚动中会露白 - 别用百分比值（如
50% 50%），它依赖锚点重算，响应式重排时会跳变；优先用center 100px这类像素单位
scroll-timeline 驱动的原生滚动动画（Chrome 115+ / Safari 17.4+）
这是真正响应式、平滑、声明式的未来方案，但需严格满足前提：
立即学习“前端免费学习笔记（深入）”；
- 动画只能用
background-position，不能混用transform或opacity - 必须定义
@scroll-timeline规则，仅写animation-timeline: scroll(root)不生效 - 容器要有明确滚动上下文：要么是
body，要么是设了overflow-y: scroll的块级父元素 - 检查支持性必须用：
CSS.supports('animation-timeline', 'scroll()')，不支持时 fallback 到 JS 方案 -
scroll-timeline-axis: y必须显式声明（或省略，默认 y 轴），x 轴滚动驱动暂未广泛支持
最容易被忽略的一点：所谓“响应式视差”，不是让效果在不同屏幕“看起来差不多”，而是让位移量与用户实际滚动距离严格线性映射。用 background-attachment: fixed 永远做不到这点——它天生脱离滚动事件源。真要交付，得从 window.scrollY 或 scroll-timeline 出发，而不是从 CSS 声明出发。
