background-image无法用于视频，必须用<video>标签实现视频背景；需同时设置autoplay、muted、loop和playsinline，配合position: fixed与object-fit: cover全屏覆盖，并提供MP4/WebM双源及poster降级。
直接用 <video> 标签，别碰 background-image —— 后者对视频完全无效，写了也白写。
为什么 background-image: url(video.mp4) 一定失败
浏览器根本不识别视频文件作为背景图值。它会静默忽略整条声明，控制台不报错、页面没反应，只留一个纯色或空白背景。所有“CSS 视频背景”的说法都是误导。
必须走语义化路径：<video> 标签 + 定位覆盖 + 层级控制。
- 错误写法：
div { background-image: url("bg.mp4"); } - 正确起点：
<video autoplay muted loop playsinline><source src="bg.mp4" type="video/mp4"></video> - 视频必须放在
<body>直接子级，或与内容同级的容器内，不能嵌套在文字容器里
autoplay、muted、loop 缺一不可
现代浏览器（Chrome 120+、Safari 17+、Firefox 125+）默认阻止有声自动播放。漏掉 muted，autoplay 就是摆设——常见现象：黑屏、卡首帧、控制台报 NotAllowedError: play() failed because the user didn't interact with the document first。
立即学习“前端免费学习笔记（深入）”；
-
autoplay和muted必须同时出现在 HTML 标签里，JS 后续赋值（如video.muted = true）无效 -
loop不是可选：不加会导致播完停住，背景中断，体验断裂 - iOS Safari 还要额外加
playsinline和webkit-playsinline，否则强制全屏弹出
用 position: fixed + object-fit: cover 填满视口
width: 100vw; height: 100vh 在移动端极不可靠：地址栏显隐、滚动条宽度、缩放都会导致错位或露白。iOS Safari 滚动时 100vh 值跳变，但 <video> 不重绘，结果就是顶部/底部突然出现白边。
- 可靠写法：
position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 必须加
z-index: -1，否则内容被压在底下；再加pointer-events: none避免遮挡按钮点击 - 别用
min-width/min-height+transform: translate(-50%, -50%)居中方案——它依赖父容器尺寸，在 fixed 场景下多余且易出错
格式、体积和降级必须同步处理
只提供 MP4 会丢掉 Firefox 用户（不支持 H.264），只提供 WebM 会丢掉 Safari 用户（旧版不支持 VP9）。单个大视频（>5MB）会让 LCP 崩溃，首屏白屏明显。
- 双
<source>是底线：<source src="bg.mp4" type="video/mp4"><source src="bg.webm" type="video/webm"> - 导出建议：分辨率 ≤1280×720，码率 1500–2500 kbps，帧率 24–30 fps
- 必加
poster="cover.jpg"，图片宽高比需匹配视频，否则拉伸变形；同时给父容器设background-image作 CSS fallback - 移动端可 JS 检测屏幕宽度，小屏直接移除
<video>，改用静态图
最常被跳过的点：poster 图片 404 或 MIME 类型错误，会导致首帧空白；z-index: -1 忘加，文字就永远显示不出来；playsinline 漏写，iOS 上一打开就全屏——这些不是“可能出问题”，而是“必然出问题”。
