CSS背景图平移实现景深效果详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS背景图平移动画实现景深效果》，聊聊，我们一起来看看吧！

用 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) 关闭动画。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS背景图平移实现景深效果详解》文章吧，也可关注golang学习网公众号了解相关技术文章。