本文详解通过精确控制 background-size 与 background-position 的百分比关系，配合 css 动画，创建视觉上无跳变、持续向左平移的无限滚动背景效果。
本文详解通过精确控制 background-size 与 background-position 的百分比关系，配合 css 动画，创建视觉上无跳变、持续向左平移的无限滚动背景效果。
要实现真正无缝、无限向左滑动的背景动画，关键在于打破“动画结束即重置”的视觉断层——这正是使用 background-size: cover 配合 background-position: 0% → 100% 所导致的问题：当背景图被拉伸填满容器后，100% 仅表示“容器宽度的100%”，而非“图像自身宽度的100%”，因此动画终点与起点无法自然衔接。
✅ 正确解法是主动设定背景图尺寸，并让位移范围严格匹配其可平铺区间。核心公式如下：
若设置 background-size: X% auto，则为实现无缝循环，background-position 应从 0% 动画至 (X/2)%（垂直居中时），且起始 background-position 推荐设为 0% 50% 或 50% 50% 以保障纵向稳定性。
以下为推荐实现方案（已验证兼容现代浏览器）：
.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-position: 0 50%; /* 垂直居中，水平从最左开始 */
background-repeat: no-repeat;
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>
? 为什么是 150%？
- background-size: 300% auto 表示背景图水平方向被拉伸为容器宽度的 3 倍；
- 此时，background-position: 0% 对应图像最左侧对齐容器左边缘；
- background-position: 100% 对应图像右侧 1/3 处对齐容器右边缘；
- 而 background-position: 150% 则使图像再向右偏移容器宽度的 50%，即：图像左端已移出容器左边界 50%，右端恰好填满并溢出——此时图像中间段完全覆盖容器，且下一帧 0% 会自然接续上一帧末尾的视觉位置，形成数学级无缝循环。
⚠️ 注意事项：
- 避免使用 cover 或 contain ——它们由浏览器动态计算尺寸，破坏位移可控性；
- background-repeat: no-repeat 必须显式声明，防止重复图块干扰滑动逻辑；
- 若需适配响应式容器，建议用 background-size: 300% 100% 并配合 background-position 的双值动画，或改用 CSS 自定义属性 + JavaScript 动态更新（进阶场景）；
- 动画时长（如 5s）可按需调整，不影响无缝性，仅改变滚动速度。
✅ 总结：无限滑动的本质不是“延长动画时间”，而是构造一个位移周期等于背景图有效平铺长度的闭合路径。通过 background-size: N% 主导图像尺度，再以 background-position: 0% → N/2% 完成一次完整视觉循环，即可实现优雅、高效、无感重置的持续动画。
