本文详解通过合理设置 background-size 与 background-position 的百分比关系，配合 css 动画，创建视觉上连续、无跳变的无限向左滑动背景效果，彻底解决传统 cover + 线性位移导致的重置闪烁问题。
本文详解通过合理设置 background-size 与 background-position 的百分比关系，配合 css 动画，创建视觉上连续、无跳变的无限向左滑动背景效果，彻底解决传统 cover + 线性位移导致的重置闪烁问题。
要实现真正平滑、无缝、无限循环的横向背景滑动（如模拟流动云层、传送带式纹理），关键不在于延长动画时长或增大位移值，而在于建立背景图像的可拼接尺寸基准——即让背景在水平方向上具备天然重复性，使动画终点恰好衔接起点。
❌ 为什么 background-size: cover 会导致“卡顿”？
cover 会强制缩放图像以完全覆盖容器，但其缩放比例取决于容器宽高比，导致 background-position 的像素/百分比映射不可预测。当动画从 0% 运行到 100% 时，浏览器实际渲染的背景区域发生非整数倍偏移，结束帧与起始帧无法对齐，于是出现明显的“回跳”或撕裂感。
✅ 正确解法：用可控的百分比尺寸构建无缝循环
核心思路：
- 将 background-size 设为 大于 100% 的固定水平尺寸（如 300% auto），确保图像在水平方向有足够冗余；
- 同时，background-position 的动画范围设为 0% → (background-size / 2)，使位移距离恰好等于图像自身宽度的一半，从而实现首尾自然衔接。
以下是推荐实现方案：
.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: repeat-x; /* 显式声明（虽默认生效，增强可读性） */
background-position: 0 50%; /* 垂直居中，水平起始点为左边缘 */
animation: slide-left 5s linear infinite;
}
@keyframes slide-left {
0% {
background-position: 0% 50%;
}
100% {
background-position: 150% 50%; /* 300% / 2 = 150%，完美衔接 */
}
}<div class="container">hello</div>
? 原理说明：当 background-size: 300% auto 时，图像被水平拉伸为容器宽度的 3 倍。此时，background-position: 0% 显示最左侧 1/3，150% 则显示中间偏右的 1/3 区域——而由于图像在水平方向重复铺开（repeat-x 隐式生效），150% 位置的内容与 0% 位置内容完全一致且无缝过渡，因此动画循环时无任何视觉中断。
⚠️ 注意事项与优化建议
- 避免使用 cover 或 contain：它们破坏了 background-position 百分比的确定性映射，是无限滑动失败的根源；
- background-repeat 不必显式写 repeat-x：只要 background-size 水平值 > 100%，且未设 no-repeat，浏览器自动按需平铺；
- 垂直定位建议用 50%：保证图像垂直居中，避免因容器高度与图像比例差异导致裁剪异常；
- 动画时长可自由调节：5s 可改为 8s 或 3s，不影响无缝性，仅改变滑动速度；
- 适配响应式场景：若容器宽度动态变化，建议用 vw 单位或 JavaScript 动态计算 background-size，但静态布局中固定百分比最稳定。
✅ 总结
真正的无限滑动 ≠ 更长的动画时间，而是构造可循环的背景空间拓扑。通过 background-size: X% auto 定义图像冗余宽度，并让 background-position 动画跨度为 X%/2，即可实现数学意义上的无缝闭环。这一模式简洁、高效、兼容性好（支持所有现代浏览器及 IE10+），是 UI 动效开发中的经典实践。
