bg-fixed 无法实现真视差，因其仅固定背景图于视口，不随滚动变化；真视差需背景移动速度慢于内容，而 Tailwind 原生无动态 transform 插值工具类。
为什么直接用 Tailwind 的 bg-fixed 做不了真视差
因为 bg-fixed 只是让背景图相对于视口固定，不随滚动位移——它本质是 CSS 的 background-attachment: fixed，和元素自身滚动位置无关。真正的视差需要背景移动速度 *慢于* 内容滚动速度，而原生 Tailwind 没提供类似 transform: translateY() 动态插值的工具类。
用 useScroll + useTransform（Framer Motion）配合 Tailwind 实现可控视差
这是目前最稳定、可微调的方案：用 Framer Motion 监听滚动，把 scrollY 进行缩放后映射到 translateY，再用 Tailwind 控制容器结构和基础样式。
- 安装依赖：
npm install framer-motion - 背景图必须设为
absolute定位，父容器设relative overflow-hidden - 关键点：用
useTransform(scrollYProgress, [0, 1], [-50, 50])控制位移范围（单位 px），数值越大视差越强 - 别忘了给背景图加
object-fit: cover和w-full h-full，否则拉伸错位
<div className="relative h-[80vh] overflow-hidden">
<motion.div
className="absolute inset-0 bg-[url('/hero-bg.jpg')] bg-cover"
style={{
y: useTransform(scrollYProgress, [0, 1], [-40, 40])
}}
/>
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-4xl font-bold text-white">内容层</h1>
</div>
</div>
纯 CSS 方案：用 background-position-y + scroll-timeline（仅 Chromium 115+）
如果你只支持最新 Chrome/Edge，可以不用 JS，但兼容性极窄，且 Tailwind 默认不生成 background-position-y 工具类，得手动加。
- 先在
tailwind.config.js的theme.extend.backgroundPosition里添加'y-1/4': '0% 25%'这类值 - 定义
@scroll-timeline规则，绑定到容器的scroll()轨迹 - 用
@keyframes动画驱动background-position-y变化，动画时长必须匹配 timeline 长度 - 注意：Firefox 和 Safari 当前完全不支持
scroll-timeline，生产环境慎用
容易被忽略的细节：性能与响应式断裂点
视差效果在移动端常卡顿或失效，不是代码写错了，而是触发条件变了。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 默认禁用
background-attachment: fixed，所以任何依赖它的伪视差都会退化成普通滚动 - Framer Motion 方案中，务必给 motion 组件加
whileInView或用useScroll({ container: ref })限定监听范围，否则全局滚动会持续触发重计算 - 小屏幕下视差位移值要减半（比如从
[-40, 40]改成[-20, 20]），否则背景快速滑出视野，只剩空白 - 图片体积必须压缩，视差背景图建议 WebP +
loading="lazy"，不然首屏加载延迟明显
真正难的不是写出第一版视差，而是让位移速率、容器裁剪、图像加载、跨端行为全部对齐——这些细节没对齐，用户看到的就是闪烁、跳变或干脆没反应。
