video加object-fit: cover仍有黑边，是因为父容器未占满视口；需设父容器position: fixed+100vw/100vh，video自身display: block+100%+object-fit: cover；z-index: -1需配合position: fixed/absolute才生效；自动播放须同时满足muted、autoplay、playsinline且写在html中。
video加object-fit: cover为什么还是有黑边
根本不是object-fit没生效，而是它只管“怎么裁”，不管“容器有没有铺满视口”。如果video的父容器没强制占满整个视口（比如只是width: 100%但高度由内容撑开），那裁剪动作就发生在一块小区域里，自然留黑边。
必须让video的**直接父容器**脱离文档流并覆盖视口：
-
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh（iOS Safari 地址栏跳变时，改用min-height: 100vh或100dvh） -
body { margin: 0 }——浏览器默认body有8px外边距，不清理就会漏白边 -
video自身设display: block; width: 100%; height: 100%; object-fit: cover，三者缺一不可
z-index: -1为什么视频还在内容上面
z-index: -1对position: static（video默认值）完全无效。它不是“调低层级”，而是“在已定位元素内部调节顺序”。
常见失效场景和应对方式：
- 只写
z-index: -1，没配position: fixed或position: absolute→ 必须补上定位属性 - 父容器有
transform、opacity: 0.99或will-change→ 会创建新层叠上下文，导致子元素z-index: -1被截断；更稳的做法是给内容区域显式设z-index: 1 - 依赖默认
z-index: auto→ 不同浏览器行为不一致，所有关键层都应显式声明
移动端自动播放失败报错DOMException: play() failed
这不是CSS能解决的问题，是浏览器策略硬限制：Chrome、Safari、Firefox 全部要求无声自动播必须同时满足muted和autoplay，缺一不可。
关键属性一个都不能少：
-
muted和autoplay必须写在HTML标签上，不能靠JS后补 -
playsinline——iOS必须加，否则强跳全屏 -
preload="metadata"——减少首帧等待时间 -
loop——防中途卡顿中断，尤其Android WebView环境
别试图用document.addEventListener('click', () => video.play())绕过——用户首次交互前，play()调用大概率被拒绝。
文字看不清不是z-index问题，是对比度失控
视频明暗变化大，纯白/黑文字在某些帧会直接消失。遮罩层不能只靠单色::before，得主动控对比度。
推荐做法：
- 用
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5))盖在video上，比纯黑更自然 - 文字容器加
isolation: isolate，避免mix-blend-mode在部分场景下意外失效 - 别用
width: 100%; height: 100%强行拉伸视频——这会导致变形，object-fit: cover才是保持比例的关键
真正难的从来不是“铺满”，而是让object-fit裁得准、z-index压得稳、muted autoplay跑得通——三者只要漏一个，整页背景就垮一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
