HTML/CSS实现背景图水平无限循环移动，解决移动时放大问题

阿华AIGC实验室

2026-5-15

解决背景图水平无限循环移动且不放大的问题

我看了你的代码，问题出在你是通过动画容器的left和top属性来实现移动效果，再加上background-size: cover的设置，导致背景图随着容器偏移不断重新适配容器尺寸，视觉上就出现了放大的错觉。而且你同时修改了水平和垂直方向的偏移，也会加剧这个问题。

下面是修正后的方案，核心是直接动画背景图的位置，而不是移动容器本身：

修正后的代码

HTML（保持不变）

<div id="back"></div>
<div id="front"></div>

CSS（关键修改）

* { margin: 0; padding: 0; }
body { background-color: white; }

/* 定义水平滚动的动画，只修改背景图的水平位置 */
@keyframes scrollHorizontal {
    from { background-position: 0 0; }
    to { background-position: -100% 0; }
}

#back {
    background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 让背景图高度适配容器，宽度按比例自动缩放，保证重复无缝 */
    background-size: auto 100%;
    /* 开启水平重复，实现无限循环的基础 */
    background-repeat: repeat-x;
    opacity: 1;
    z-index: -1;
    animation: scrollHorizontal 200s linear infinite;
}

#front {
    background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 100%;
    background-repeat: repeat-x;
    opacity: 0.5;
    z-index: -1;
    animation: scrollHorizontal 300s linear infinite;
}

关键修改点说明

动画目标切换：把原来的容器left/top动画改成background-position动画，这样移动的是背景图本身，容器始终固定在全屏位置，不会触发背景图的重新缩放。
背景重复设置：添加background-repeat: repeat-x，让背景图在水平方向无限重复，配合位置动画实现无缝循环。
背景尺寸调整：用background-size: auto 100%替代cover，确保背景图高度和容器一致，宽度按比例自动适配，避免缩放导致的变形或放大，同时保证重复时边缘衔接自然。
动画终点用百分比：用-100%作为动画终点，不管屏幕尺寸多大，背景图都能刚好滚动一个完整周期，然后无缝重复，比固定像素值更适配各种设备。