用元素铺满容器并叠加内容是替代css background-image的唯一可靠方案，需设置autoplay muted loop playsinline、object-fit:cover及z-index:-1等关键属性，并注意h.264编码、分辨率控制与同源部署。
用 <video></video> 替代 background-image 是唯一可靠方案
HTML 本身不支持把视频设为 CSS 的 background-image（比如 background-image: url(video.mp4)），这种写法完全无效。真正可行的方式是：用 <video></video> 元素铺满容器，再用其他元素（如文字、按钮）叠在上面。这不是“加背景图”，而是“模拟背景效果”。
<video></video> 全屏铺底的关键属性和避坑点
要让视频看起来像背景，必须控制播放行为、尺寸和层级。常见失败原因是没关自动播放策略或 z-index 错乱。
-
autoplay必须配合muted—— 现代浏览器（Chrome、Safari、Edge）禁止有声视频自动播放，否则会静音或直接暂停 -
loop和playsinline（iOS 必加）缺一不可，否则 iOS 上视频会全屏弹出 - 用
object-fit: cover配合width: 100%; height: 100%才能真正铺满且不拉伸变形 - 父容器需设
position: relative，<video></video>设position: absolute+z-index: -1，否则内容会被压在底下
最小可用 HTML + CSS 示例（含移动端适配）
以下代码可直接复制使用，已通过 Chrome、Safari、Firefox 及 iOS Safari 验证：
<div class="video-bg">
<video autoplay muted loop playsinline>
<source src="bg.mp4" type="video/mp4">
</video>
<div class="content">
<h1>这是叠加的文字</h1>
</div>
</div>
<style>
.video-bg {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-bg video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 20vh;
}
</style>
性能与兼容性必须注意的三件事
动态背景视频不是炫技工具，加载慢、卡顿、黑屏都源于这几个细节：
立即学习“前端免费学习笔记（深入）”；
- 视频务必用 H.264 编码（MP4 容器），避免 WebM 或 AV1 —— Safari 对 WebM 支持不稳定，AV1 兼容性差
- 分辨率别超过 1920×1080，时长控制在 10 秒内并循环，否则首帧加载延迟明显；可用 FFmpeg 压缩：
ffmpeg -i in.mp4 -vcodec libx264 -crf 28 -preset fast -vf "scale=1920:-2" out.mp4 - 没有
poster属性时，iOS Safari 可能首帧黑屏 1–2 秒；建议加一张同构缩略图：<video poster="bg-poster.jpg"></video>
最常被忽略的是：视频文件得放在同源服务器下，跨域资源即使路径对也会触发 CORS 报错，导致 video 元素静默失败。
