用 background-position 实现视差滚动最轻量兼容，关键在稳、有层次、不突兀：设 no-repeat 与 cover/200% 宽度撑满，@keyframes 线性位移，长 duration（如30s）+ infinite 循环，多层不同速度（40s/20s/8s）营造景深，注意图片宽度≥150%且适配减少动画偏好。
用 background-position 做背景图缓慢平移，是实现视差滚动（景深感）最轻量、兼容性最好的方式之一。关键不是“动得快”，而是“动得稳、有层次、不突兀”。
设置基础背景与定位锚点
先确保背景图可平移：必须设为 no-repeat 或合理重复，并用 background-size: cover 或具体尺寸撑满容器；同时明确初始位置，比如：
background-image: url('scene.jpg');
background-size: 200% 100%; /* 宽度拉宽，留出移动空间 */
background-repeat: no-repeat;
background-position: 0 0; /* 左上角起始 */用 @keyframes 控制匀速位移
水平缓慢右移（模拟远距离景物慢速后退），推荐用 linear 时间函数保持恒定速度：
@keyframes scrollBg {
from { background-position: 0 0; }
to { background-position: -100px 0; } /* 向左偏移，视觉上图向右滑 */
}注意：负值向左移背景图，人眼感知是画面“向右缓缓流动”，符合远背景的视差逻辑。
立即学习“前端免费学习笔记（深入）”；
绑定动画并控制节奏
把动画加到元素上，重点调两个参数：
-
duration 要够长：比如
30s—— 移动越慢，越像远处云层或山峦的自然漂移 - iteration-count 设为 infinite：持续循环，避免停顿打断沉浸感
- 可加
animation-fill-mode: forwards防止回跳，但配合线性循环通常不需要
animation: scrollBg 30s linear infinite;
叠加多层实现景深层次
真正有景深，靠的是“不同速度”：
- 最远层（天空/远山）：
background-size: 200% 100%+40s动画 → 最慢 - 中层（建筑群）：
background-size: 150% 100%+20s→ 中速 - 近层（树枝/栏杆）：可用伪元素 + 更小
background-size和8s→ 明显更快
每层独立容器或伪元素，各自设置不同 animation-duration 和 background-position 范围，视觉上就自然拉开距离感。
基本上就这些。不复杂但容易忽略的是：背景图本身要足够宽（建议 ≥150% 容器宽），否则平移过程会露白边；另外避免在小屏幕高频刷新区域滥用，必要时用 @media (prefers-reduced-motion) 关闭动画。
