全屏时video背景失效是浏览器行为所致，应通过video:fullscreen等伪类设置background-color或object-fit控制；div遮罩层无效因脱离渲染树，需用伪元素或动态fixed层替代。
video 元素全屏时背景被清空怎么办
浏览器进入原生全屏后，video 会脱离当前 DOM 流，父容器的 background、overlay 等样式完全失效——这不是你 CSS 写错了，是浏览器行为本身导致的。
真正能控制全屏画面“背后”的，只有两个地方：一是全屏时 video 自身的 object-fit 和 background-color，二是利用 :fullscreen 伪类对 video 的直接样式干预。
-
video在全屏状态下不继承父级背景，但支持自身设置background-color（纯色）或background-image（部分浏览器支持，但兼容性差） - 必须用
video:fullscreen或video:-webkit-full-screen等前缀写法才能命中全屏状态下的元素 - 不要试图给
video的父容器加遮罩层并指望它在全屏时显示——它会被强制隐藏
如何用 :fullscreen 伪类补上黑色/灰色背景
最稳的方式是直接给 video 设置全屏时的背景色，避免留白或透出页面底色。注意不同内核需分别声明：
video:fullscreen {
background-color: #000;
}
video:-webkit-full-screen {
background-color: #000;
}
video:-moz-full-screen {
background-color: #000;
}
video:-ms-fullscreen {
background-color: #000;
}
这个方案生效的前提是：video 没有设置 poster，且未加载首帧（否则 poster 图像会优先显示）；如果想覆盖 poster，就得等视频 ready 后用 JS 清掉 poster 属性，再手动触发样式重绘。
用 object-fit 配合背景色控制“遮挡感”
object-fit 不影响背景色，但它决定视频内容是否填满整个全屏区域——如果视频宽高比和屏幕不一致，又没设背景色，就会露出难看的空白边。
- 用
object-fit: cover让视频缩放填满，裁剪多余部分（推荐） - 用
object-fit: contain保持完整画面，但四周可能留黑边（此时更依赖background-color统一视觉） - 别用
object-fit: fill，它会拉伸变形，遮挡背景再好也没意义 - 全屏下
object-fit生效，但必须写在:fullscreen规则里才可靠
为什么加 div 遮罩层在全屏时无效
很多人习惯在 video 外包一层 <div class="overlay">，用绝对定位盖住播放控件或做 loading 提示。但一旦调用 <code>video.requestFullscreen()，这个 div 就彻底从渲染树中“断连”——不是 z-index 不够，是它根本不在全屏上下文里。
可行的替代思路只有两个：
- 把需要常驻的 UI（如退出按钮）画在
video的::-webkit-media-controls伪元素里（限制大，仅 Chrome 支持部分定制） - 监听
fullscreenchange事件，在进入全屏时动态插入一个同尺寸div到document.body，并用position: fixed+z-index覆盖——但这属于 hack，且要处理退出全屏时的清理
真正干净的做法，是接受全屏就是“视频独占”，所有交互和视觉辅助都得收束到 video 自身样式或其伪元素能力范围内。
