HTML5 元素不支持直接用 opacity 实现半透明层叠而不影响画质，因其会整体降低视频帧与控件的不透明度；正确做法是保持 video opacity: 1，用 background-blend-mode 混合背景、rgba 设置叠加层透明度，或用 mask-image 实现局部遮罩。
HTML5 元素本身不支持直接设置 opacity 实现“半透明层叠”后仍可交互或保持视频内容可见——因为 opacity 作用于整个渲染盒，降低不透明度的同时也会让视频画面变淡、控件变模糊，且无法单独控制视频内容与 UI 层的透明关系。
video 标签加 opacity 后画面发灰、控件难操作？
这是最常见误解：给 直接设 style="opacity: 0.7;" 确实会让整个视频元素（含 poster、播放控件、字幕轨道）一起变透明。但问题在于：
- 视频解码后的帧图像被整体 alpha 混合，观感像蒙了一层灰，尤其在深色背景上对比度骤降
- 自定义控件（如 ）若放在 video 内部或同级但 z-index 不当，会一并变透明，点击响应区域也变弱
- 某些浏览器（如旧版 Safari）对
opacity+的硬件加速处理不稳定，可能触发回退到软件渲染，卡顿明显用 background-blend-mode 叠加视频纹理更可控
如果目标是「让视频作为背景，上面叠加半透文字/按钮，且视频本身保持 100% 清晰度」，正确做法是把视频转为
的背景，而非直接操作 video 标签：关键点：
立即学习“前端免费学习笔记（深入）”；
-
自身opacity: 1，保证画面锐利；所有透明效果由父容器或覆盖层承担 - 用
background-blend-mode（如overlay、multiply）混合 poster 图与渐变遮罩，比纯 opacity 更保细节 - 叠加层（
.overlay-content）单独设opacity: 0.85或rgba(255,255,255,0.9)，不影响视频流渲染
需要局部隐藏 video 某块区域？mask-image 是正解
想实现「视频中间挖空显示下层内容」「圆形头像裁切」「渐隐边缘」等效果，
opacity完全无能为力，必须用遮罩：注意：
-
mask-image接收的是灰度图：白色=完全显示，黑色=完全隐藏，灰色=按比例透明 - 务必加
-webkit-mask-image前缀，Safari 目前仍需此支持 - 避免用
clip-path做复杂形状遮罩——它会触发 layout 重排，滚动时易掉帧；mask-image是合成层操作，性能更好
真正要小心的是：别把
opacity当万能透明开关。video 的渲染管线特殊，强行套用通用 CSS 透明规则，大概率换来画质损失、交互失效或兼容性断裂。优先拆分职责——视频负责播放，遮罩/混合/叠加层各司其职。 - 某些浏览器（如旧版 Safari）对
