本文详解如何通过精确控制 background-size 与 background-position 的百分比关系，创建视觉上连续、无跳变的无限横向滑动背景，彻底解决传统 cover + 线性动画导致的重置闪烁问题。
本文详解如何通过精确控制 background-size 与 background-position 的百分比关系，创建视觉上连续、无跳变的无限横向滑动背景，彻底解决传统 cover + 线性动画导致的重置闪烁问题。
实现真正“无限滑动”的背景动画，关键不在于延长动画时长或堆砌超大位移值（如 1000%），而在于构建可无缝拼接的背景纹理循环系统。其核心原理是：让背景图像在水平方向上被拉伸为容器宽度的整数倍（如 300%），再通过 background-position 在该扩展画布内匀速移动，使每次动画结束时，右侧新露出的部分恰好与左侧刚移出的部分完全一致——从而达成视觉上的无限连贯。
✅ 正确实现方案（推荐）
以下代码即为经过验证的最优解：
.container {
height: 200px;
width: 500px;
font-size: 200px;
font-family: sans-serif;
font-weight: 600;
background-image: url('https://i.ibb.co/5F5H2S2/background.jpg');
background-size: 300% auto; /* 关键：水平方向拉伸为3倍宽 */
background-repeat: no-repeat;
background-position: 0 50%; /* 垂直居中，水平起始点为左边缘 */
animation: background-animation 5s linear infinite;
}
@keyframes background-animation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 150% 50%; /* 移动距离 = background-size / 2 */
}
}<div class="container">hello</div>
? 为什么是 150%？
当 background-size: 300% auto 时，背景图像水平方向被拉伸为容器宽度的 3 倍。为实现无缝循环，动画需让背景从最左端（0%）平滑移动至“中间对齐点”（即 300% / 2 = 150%），此时原图右半部分刚好完全替代左半部分，视觉无断层。若使用 cover，浏览器会动态缩放并裁剪图像，失去可控的像素级定位基础，必然导致循环断裂。
⚠️ 注意事项与最佳实践
- 避免 background-size: cover 或 contain：二者破坏背景坐标系统的确定性，无法实现精准位移控制；
- background-repeat: no-repeat 必须显式声明：防止图像重复干扰滑动逻辑（尽管 background-size > 100% 时通常不重复，但显式声明更安全）；
- 垂直定位建议用 50%：确保图像在容器中垂直居中，提升兼容性；若需顶部对齐，可统一改为 0%，但需同步调整 background-position 的 Y 值；
- 性能优化：添加 will-change: background-position（谨慎使用）或确保动画仅触发 composite 层，避免重排重绘；
- 响应式适配：若容器尺寸动态变化，建议配合 CSS 自定义属性或 JS 动态计算 background-size 与 background-position，维持比例关系。
✅ 总结
真正的无限滑动 ≠ 无限延长动画时间，而是构建一个可控、可预测、可拼接的背景空间。通过 background-size: X% auto 定义背景画布宽度，再以 background-position: 0% → X%/2 实现半程位移，即可让浏览器在每一帧都呈现逻辑连续的画面片段。这一方法轻量、高效、兼容性好（支持所有现代浏览器及 IE10+），是 CSS 背景动画工程化实践中的标准范式。
