需用 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），否则轻微移动就导致背景大幅跳变 - 务必限定监听容器（如 ），不要绑在
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()缓存，偏移就会漂移。这个细节，多数示例都漏了。 - 别只监听
