用 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');<br>background-size: 200% 100%; /* 宽度拉宽，留出移动空间 */<br>background-repeat: no-repeat;<br>background-position: 0 0; /* 左上角起始 */水平缓慢右移（模拟远距离景物慢速后退），推荐用 linear 时间函数保持恒定速度：
@keyframes scrollBg {<br> from { background-position: 0 0; }<br> to { background-position: -100px 0; } /* 向左偏移，视觉上图向右滑 */<br>}注意：负值向左移背景图，人眼感知是画面“向右缓缓流动”，符合远背景的视差逻辑。
立即学习“前端免费学习笔记（深入）”；
把动画加到元素上，重点调两个参数：
30s —— 移动越慢，越像远处云层或山峦的自然漂移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背景图需要慢慢移动营造景深效果如何做_利用background-position动画完成平移的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
360
收藏
