使用 background-attachment: fixed 实现视差需满足：背景图设于 body 或全屏容器、禁用 transform/filter 等触发层叠上下文的属性，并配套 background-size: cover、background-position: center、background-repeat: no-repeat；移动端及新版 Chrome 需特别降级处理。
直接用 background-attachment: fixed 就能做出基础视差效果，但必须满足几个关键条件，否则在多数现代浏览器里会“失效”——不是写错了，而是被浏览器主动降级为 scroll。
核心前提：背景必须设在正确的位置
这个属性只对设置了 background-image 的元素生效，且最可靠的位置是 body 或全屏级容器（比如 .hero），不能套在嵌套过深、带 transform 或 filter 的父容器里。
- ✅ 推荐写法：背景图直接放在
body上，并确保body { height: 100vh; margin: 0; } - ✅ 可行替代：用一个独立区块（如
.parallax-section）设固定高度（如min-height: 100vh），再把背景图和fixed都加在它上面 - ❌ 避免：父容器用了
transform: translateZ(0)、filter: blur(1px)、opacity: 0.99等，这些会触发新层叠上下文，强制fixed失效
必要配套样式，缺一不可
单写 fixed 不够，背景图容易拉伸变形、偏移或重复，需组合使用：
-
background-size: cover—— 让图片等比缩放并填满整个区域 -
background-position: center—— 防止图片裁剪偏移，保持视觉中心稳定 -
background-repeat: no-repeat—— 关闭平铺，避免出现多张图干扰视差感 -
background-color（可选）—— 设个 fallback 色，防止图片加载失败时白屏
移动端与新版 Chrome 的特别注意
Safari 几乎默认禁用 fixed 背景；Chrome v99+ 要求背景必须设在根滚动容器（body 或 html）上才可能生效，子容器即使写对也大概率不工作。
- ? 移动端建议降级：用媒体查询配合
@media (hover: none) and (pointer: coarse)或(prefers-reduced-motion: reduce)，把background-attachment改回scroll - ? 检查是否被干扰：打开开发者工具 → 查看该元素的 computed 样式，确认
background-attachment显示为fixed，而不是被覆盖或重置 - ? 替代思路（纯 CSS）：如果
fixed确实不可靠，可用transform: translateY()+scroll-margin-top模拟分层滚动，但需配合足够高的内容区域来体现位移差
简单可用的完整示例
复制即用，适用于首页封面区块：
.hero {
min-height: 100vh;
background-image: url('bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
记得后面接一段足够长的内容（比如 height: 200vh 的 section），才能明显看到“背景不动、文字上滑”的视差对比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
