HTML背景图无法真正循环播放，需用CSS动画切换多张图片、雪碧图位移或video标签实现；前者适合少量帧，后者推荐用于高帧率复杂动效，资源质量决定效果成败。
HTML 本身不支持“背景图片循环播放”——
是静态的，没有帧动画能力。所谓“循环播放”，实际是用 CSS 动画 + 多张图片（或雪碧图）模拟，或用
/
替代。直接设
永远不会动。
用 CSS
+ 多张背景图切换实现“循环”
这是最接近“背景图循环播放”的纯 CSS 方案，本质是按时间切换
的 URL，靠视觉暂留形成连续感。适合 3–5 张图、节奏较慢的场景。
必须用绝对路径或同域可访问的图片 URL，
跨域
会触发 CORS 阻止加载
切换间隔不能太短（建议 ≥ 300ms），否则部分
浏览器
（如 Safari）可能跳帧或卡顿
每张图尺寸、比例需一致，否则背景会闪动或错位
动画需配合
或
统一缩放行为
用 CSS 雪碧图（Sprite）+
动画更高效
比切换 URL 更轻量，避免重复 HTTP 请求和解码开销。适用于帧数较多、节奏均匀的循环（比如粒子飘落、水流纹理）。
雪碧图必须是单行/单列拼接，宽度或高度为单帧 × 帧数，留白一致
的
必须等于总帧数，否则循环错位
IE 不支持
缓动函数，需加
前缀并测试 fallback
移动端要注意大图内存占用，超过 2048×2048 可能被降采样
真·视频循环：用
替代背景图（推荐用于复杂动效）
当需要高帧率、透明通道、或已有 MP4/WebM 视频源时，
是最稳定的选择。它原生支持
、
、
，且能响应
控制裁剪。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须加
属性，否则 iOS 和新版 Chrome 会阻止自动播放
用
属性提供首帧占位图，避免视频加载前白屏
设
+
可模拟全屏背景，但需注意父容器
否则滚动出界
MP4 优先选 H.264
编码
，WebM 用 VP9；避免 HEVC，兼容性差
真正难的不是“怎么写动画”，而是图片/视频资源本身的准备：尺寸一致性、编码格式、首帧对齐、加载时机。很多“循环卡顿”问题根源在素材没压好，而不是 CSS 写得不对。
background-imagebackground-image: url(...)@keyframesbackground-imagebackground-size: cover100% 100%@keyframes bg-cycle {
0% { background-image: url("frame1.jpg"); }
25% { background-image: url("frame2.jpg"); }
50% { background-image: url("frame3.jpg"); }
75% { background-image: url("frame4.jpg"); }
100% { background-image: url("frame1.jpg"); }
}
body {
animation: bg-cycle 4s steps(4) infinite;
background-size: cover;
background-position: center;
}background-positionsteps(N)Nsteps()-webkit-.animated-bg {
width: 100vw;
height: 100vh;
background-image: url("sprite-8frames.png");
background-size: auto 100%; /* 垂直拼接时 */
animation: sprite-scroll 2s steps(8) infinite;
}
@keyframes sprite-scroll {
0% { background-position-y: 0; }
100% { background-position-y: -800%; } /* 8 帧，每帧占 100%/8 = 12.5%，总移 87.5% → 写 -800% 确保最后一帧完整显示 */
}loopmutedplaysinlineobject-fitmutedposterposition: fixedz-index: -1overflow: hidden