需用 JavaScript 监听 mousemove/touchmove，归一化鼠标坐标并取反缩放后设为 background-position，配合 requestAnimationFrame 节流和 resize 重校准，才能实现平滑视差背景效果。
用 mousemove 监听鼠标位置并动态更新背景偏移
HTML 本身不支持“背景随鼠标移动”，必须靠 JavaScript 实时计算鼠标相对于容器的位置，再设置 background-position。关键不是“动图”，而是把鼠标坐标映射为背景图的偏移量，形成视差感。
常见错误是直接用 clientX/clientY 原值设为 background-position，结果背景飞出视野——因为单位不匹配，且没做归一化或反向处理。
- 容器需设
background-attachment: fixed或scroll，但实际跟鼠标联动时建议用background-attachment: scroll+ 手动控制background-position - 偏移方向通常要取反（鼠标右移，背景左移），否则交互感违和
- 幅度要缩放（比如乘以
0.1），否则轻微移动就导致背景大幅跳变 - 务必限定监听容器（如
<div id="hero">），不要绑在document上，否则滚动时坐标错乱
background-position 的数值单位和坐标系怎么配准
CSS 中 background-position 默认以容器左上角为原点，x y 值增大表示向右、向下偏移。而鼠标事件的 offsetX/offsetY 是以目标元素左上角为原点的像素值——二者坐标系一致，可直接映射，但需加负号实现“跟随”效果。
更稳妥的做法是归一化到 [-0.5, 0.5] 区间再缩放，避免容器尺寸变化时行为突变：
立即学习“前端免费学习笔记（深入）”；
const hero = document.getElementById('hero');
hero.addEventListener('mousemove', (e) => {
const rect = hero.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
hero.style.backgroundPosition = `${x * 20}px ${y * 20}px`;
});这里 20 是最大偏移像素数，数值越小越“稳”，越大越“飘”。注意：若背景图尺寸小于容器，偏移过大会露出空白；若用 background-size: cover，则偏移需按缩放后的真实尺寸重算，复杂度上升。
移动端 touchmove 怎么兼容
手机端没有 mousemove，得监听 touchmove 并从 touches[0] 取坐标。但要注意：默认行为可能触发页面滚动，需 e.preventDefault()；且单指触控时 touches.length === 1 才处理，避免多指误触发。
- 别只监听
touchstart就绑定touchmove，应在同一元素上直接监听touchmove并阻止默认行为 - 触摸坐标要用
e.touches[0].clientX，不是e.targetTouches（后者是目标元素内的坐标，有偏差） - PC 和移动端逻辑最好合并，用
e.type === 'touchmove' ? e.touches[0] : e统一取点
性能卡顿？用 requestAnimationFrame 节流
高频 mousemove 在低端设备上直接更新 style.backgroundPosition 会掉帧。不能靠 debounce（会导致明显延迟），而应交由浏览器渲染节奏调度。
做法是把坐标存入变量，用 requestAnimationFrame 统一更新样式：
let x = 0, y = 0;
hero.addEventListener('mousemove', (e) => {
const rect = hero.getBoundingClientRect();
x = (e.clientX - rect.left) / rect.width - 0.5;
y = (e.clientY - rect.top) / rect.height - 0.5;
});
function updateBackground() {
hero.style.backgroundPosition = `${x * 20}px ${y * 20}px`;
requestAnimationFrame(updateBackground);
}
requestAnimationFrame(updateBackground);这样既保证平滑，又不会因鼠标狂甩而堆积任务。如果还要加视差层级（前景/中景/背景不同速度），就给每层单独存 x/y 和缩放系数，复用同一帧函数更新。
真正难的是响应式场景下容器尺寸动态变化时的坐标重校准——resize 后不重置 getBoundingClientRect() 缓存，偏移就会漂移。这个细节，多数示例都漏了。
