用元素铺满容器并叠加内容是替代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 元素静默失败。
