HTML背景图无法真正循环播放，需用CSS动画切换多张图片、雪碧图位移或video标签实现；前者适合少量帧，后者推荐用于高帧率复杂动效，资源质量决定效果成败。
HTML 本身不支持“背景图片循环播放”——background-image 是静态的，没有帧动画能力。所谓“循环播放”，实际是用 CSS 动画 + 多张图片（或雪碧图）模拟，或用 / 替代。直接设 background-image: url(...) 永远不会动。
用 CSS @keyframes + 多张背景图切换实现“循环”
这是最接近“背景图循环播放”的纯 CSS 方案，本质是按时间切换 background-image 的 URL，靠视觉暂留形成连续感。适合 3–5 张图、节奏较慢的场景。
- 必须用绝对路径或同域可访问的图片 URL，跨域会触发 CORS 阻止加载
- 切换间隔不能太短（建议 ≥ 300ms），否则部分浏览器（如 Safari）可能跳帧或卡顿
- 每张图尺寸、比例需一致，否则背景会闪动或错位
- 动画需配合
background-size: cover或100% 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;
}用 CSS 雪碧图（Sprite）+ background-position 动画更高效
比切换 URL 更轻量，避免重复 HTTP 请求和解码开销。适用于帧数较多、节奏均匀的循环（比如粒子飘落、水流纹理）。
- 雪碧图必须是单行/单列拼接，宽度或高度为单帧 × 帧数，留白一致
-
steps(N)的N必须等于总帧数，否则循环错位 - IE 不支持
steps()缓动函数，需加-webkit-前缀并测试 fallback - 移动端要注意大图内存占用，超过 2048×2048 可能被降采样
.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% 确保最后一帧完整显示 */
}真·视频循环：用
当需要高帧率、透明通道、或已有 MP4/WebM 视频源时， 是最稳定的选择。它原生支持 loop、muted、playsinline，且能响应 object-fit 控制裁剪。
立即学习“前端免费学习笔记（深入）”；
- 必须加
muted属性，否则 iOS 和新版 Chrome 会阻止自动播放 - 用
poster属性提供首帧占位图，避免视频加载前白屏 - 设
position: fixed+z-index: -1可模拟全屏背景，但需注意父容器overflow: hidden否则滚动出界 - MP4 优先选 H.264 编码，WebM 用 VP9；避免 HEVC，兼容性差
真正难的不是“怎么写动画”，而是图片/视频资源本身的准备：尺寸一致性、编码格式、首帧对齐、加载时机。很多“循环卡顿”问题根源在素材没压好，而不是 CSS 写得不对。
