多图循环平滑移动之background实现方式

马黑黑 · 发表于 2026-8-7 12:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一、实现原理：

background 是 background-image、background-repeat、background-position、background-size、background-color 等的简写属性，其中的 background-position 属性用于设置背景图片的位置。以背景图片自右向左移动为例：

background-position 从 x 到 -x 的改变可以达成背景图片自右向左的移动效果；
多张背景图片的 background-position 的水平方向可以依次按 0、x、2*x、...、n*x 往右平铺，形成图片横向并排的布局；
最后一张背景图片和第一张相同，营造无缝循环的衔接效果。

二、完整代码（支持在线预览）：

<style>
    .pa {
        width: 1024px;
        height: 640px;
        background: 
            url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat 0 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/qqup.webp') no-repeat 1024px 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/uwty.webp') no-repeat 2048px 0/cover,
            url('https://638183.freep.cn/638183/t24/7/dbxj.jpg') no-repeat 3072px 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat 4096px 0/cover;
        animation: bgmove 30s linear infinite var(--state);
        border: thick outset #333;
        margin: auto;
        --state: running;
    }
    .pa:hover { --state: paused; }
    .tMid { text-align: center; }
    @keyframes bgmove {
        to { background-position: -4096px 0, -3072px 0, -2048px 0, -1024px 0, 0 0; }
    }
</style>

<h1 class="tMid">多张背景图片循环平滑移动演示</h1>
<div class="pa"></div>

三、简要说明：

容器元素宽高比设置最好与图片的宽高比一致或接近，这样可以减少图片变形或被剪裁的风险；
用 url() 函数加载每一张图片做背景，图片不重复（no-repeat）、各图片依次沿水平方向向右平铺（background-position）、尺寸（background-size）设置为 cover（覆盖整个容器）或 100% 100%；
背景图片平铺涉及到水平方向的距离计算，第一张图片 background-position 的 x 为 0，第二张为容器宽度*1px，第三张为容器宽度*2px，其余以此类推。如果希望每张图片之间留出间隔缝隙，尺寸可以设置为大于容器宽度，位置跟着变更，方法是第一张图片水平方向位置 0 不变，其余按 (2-1)*x 计算水平方向位置；
最后一张背景图片和第一张同，但 background-position 的 x 位置不一样，其作用是做循环衔接；
关键帧动画的 background-position 属性 x 位置反向取值，要一一对应前面各图片的属性设置。

【注意】平滑移动多个背景图片的有个重要前提：背景图片 background-size 应大于等于容器宽度。设置为 cover 或 100% 100% 时都满足这一前提。background-size 设置为 cover 时是图片覆盖整个容器，如果图片尺寸与容器宽高比不一致，图片会被剪裁；设为百分比或像素值时，图片得以完整呈现，但若图片尺寸和容器宽高比对不上，图片会扭曲、变形。