用元素铺满容器并叠加内容是替代CSS background-image的唯一可靠方案，需设置autoplay muted loop playsinline、object-fit:cover及z-index:-1等关键属性，并注意H.264编码、分辨率控制与同源部署。

用 替代 background-image 是唯一可靠方案

HTML 本身不支持把视频设为 CSS 的 background-image（比如 background-image: url(video.mp4)），这种写法完全无效。真正可行的方式是：用 元素铺满容器，再用其他元素（如文字、按钮）叠在上面。这不是“加背景图”，而是“模拟背景效果”。

全屏铺底的关键属性和避坑点

要让视频看起来像背景，必须控制播放行为、尺寸和层级。常见失败原因是没关自动播放策略或 z-index 错乱。

• autoplay 必须配合 muted —— 现代浏览器（Chrome、Safari、Edge）禁止有声视频自动播放，否则会静音或直接暂停
• loop 和 playsinline（iOS 必加）缺一

  

  不可，否则 iOS 上视频会全屏弹出
• 用 object-fit: cover 配合 width: 100%; height: 100% 才能真正铺满且不拉伸变形
• 父容器需设 position: relative， 设 position: absolute + z-index: -1，否则内容会被压在底下

最小可用 HTML + CSS 示例（含移动端适配）

以下代码可直接复制使用，已通过 Chrome、Safari、Firefox 及 iOS Safari 验证：

  
  
    
这是叠加的文字
  

性能与兼容性必须注意的三件事

动态背景视频不是炫技工具，加载慢、卡顿、黑屏都源于这几个细节：

• 视频务必用 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 秒；建议加一张同构缩略图：

最常被忽略的是：视频文件得放在同源服务器下，跨域资源即使路径对也会触发 CORS 报错，导致 video 元素静默失败。