根本原因是object-fit未匹配width/height行为；需用object-fit: cover配合居中定位和min-width/min-height；z-index生效需position非static且避免父级层叠上下文；移动端需muted、autoplay、playsinline及preload；文字可读性依赖渐变遮罩而非纯色；视频编码应兼顾H.264与WebM双源。
video设为fixed后画面被裁切或留黑边？
根本原因是object-fit没配对width/height行为。设position: fixed + width: 100%; height: 100%时，视频原始宽高比和视口不一致，浏览器默认拉伸填充（object-fit: fill），会变形；设cover又容易切掉关键内容。
-
object-fit: cover是正确选择，但必须配合top: 50%; left: 50%; transform: translate(-50%, -50%)居中，否则只覆盖左上角 - 不能只靠
width: 100vw; height: 100vh——移动端 Safari 会把地址栏高度算进vh，导致底部滚动条或空白 - 更稳的写法是
min-width: 100vw; min-height: 100vh，再用object-fit: cover让视频撑满且保持比例
z-index放最底层却盖不住其他元素？
常见错在忽略层叠上下文（stacking context）。给video设z-index: -1没用——z-index对static定位无效，且负值在非根层叠上下文中会被截断。
- 必须加
position: fixed（或absolute）才能激活z-index - 设
z-index: -1前，确保父容器没创建新层叠上下文（比如没设opacity: 0.99、transform或will-change） - 更可靠的做法是给背景
video设z-index: -1，同时给内容区域显式设z-index: 1（别依赖默认值）
移动端自动播放失败或黑屏？
Chrome 和 Safari 对autoplay卡得极严：没muted、没用户手势触发、没playsinline，视频大概率静音失败或直接不播。
- 必须加
muted和autoplay属性，缺一不可：<video muted autoplay> - iOS Safari 要求
playsinline，否则强制全屏播放，脱离背景定位 - 部分安卓浏览器需要
webkit-playsinline兼容写法 - 如果首帧仍是黑的，加
preload="auto"，但注意这会提前加载视频，影响首屏性能
全屏视频背景导致文字看不清？
不是 CSS 能单靠z-index解决的，本质是对比度问题。视频明暗变化大，纯白/黑文字在某些帧会完全不可读。
立即学习“前端免费学习笔记（深入）”；
- 别只靠遮罩层（
::before伪元素），用background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5))叠在video上，比单色遮罩更自然 - 文字容器加
isolation: isolate，避免混合模式（如mix-blend-mode: difference）意外失效 - 慎用
backdrop-filter: blur(2px)——iOS 15+ 才稳定支持，旧版直接不渲染
最麻烦的其实是视频编码：H.264 比 H.265 兼容性好，但体积大；WebM 虽小，Safari 却不支持。一个页面里往往得塞两套source，还得测不同设备的解码表现。
