HTML5的元素不支持真正透明背景，仅能通过CSS间接实现：opacity整体半透明、rgba()背景+absolute定位模拟通透感、mix-blend-mode像素混合（需isolation）、或使用含Alpha通道的WebM视频（Chrome/Firefox支持，Safari不支持）。
HTML5 的 元素本身不支持透明背景（即无法让视频画布区域“透出”背后的页面内容），所谓“视频背景透明”，实际是指让视频画面整体呈现半透明效果，或让视频容器的背景色/图层可被穿透——这必须通过 CSS 的 opacity 或 rgba() 背景配合 mix-blend-mode 等方式间接实现，且需注意浏览器限制和合成行为。
直接用 opacity 让整个视频变半透明
这是最简单、兼容性最好的方式，但会影响视频内所有内容（画面 + 控制条 + 子元素）的透明度，不能单独控制视频画面不透明而保持控件清晰。
-
opacity作用于整个元素盒模型，包括子节点，无法只透视频帧 - 值为
0.7表示整体 70% 不透明（即 30% 透明），取值范围是0（全透）到1（不透） - IE9+ 和所有现代浏览器均支持，无兼容风险
video {
opacity: 0.8;
}用 rgba() 背景 + position: absolute 模拟“透明背景”效果
当目标是让视频「看起来像浮在透明背景上」（例如叠加在文字或渐变上），真正的做法是：移除视频容器的背景色，用父容器提供视觉背景，并确保视频自身不遮挡下层内容。此时关键不是让视频“透明”，而是让它“不自带遮盖”。
- 默认
渲染时有隐式黑色背景（尤其在未加载或静音时），需显式设background: transparent - 若视频是覆盖层（如 banner 视频），应设
position: absolute，并确保父容器有position: relative和所需背景 - 避免给
设background-color: #000或其他实色，否则会盖住下层
.video-overlay {
position: relative;
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
.video-overlay video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: transparent; /* 关键：清空默认黑底 */
opacity: 0.9; /* 可选：微调画面通透感 */
}Chrome/Firefox 支持的进阶方案：mix-blend-mode 实现动态混合
如果想让视频画面与下方文字/图形产生叠加融合（如发光、滤色效果），可用 mix-blend-mode。但它不等于“透明背景”，而是像素级混合，且对性能和渲染层级敏感。
立即学习“前端免费学习笔记（深入）”；
- 仅适用于视频与同层、z-index 相近的兄弟元素混合；父背景无效
-
mix-blend-mode: multiply、screen、overlay常用于营造通透感，但效果依赖下层颜色 - 需配合
isolation: isolate防止意外继承混合模式 - Safari 对
的mix-blend-mode支持不稳定，部分版本会失效
.blend-container {
isolation: isolate;
}
.blend-container video {
mix-blend-mode: screen;
}真正“透明视频”的前提：源文件必须含 Alpha 通道
网页中无法靠 CSS 把普通 MP4/WebM 变成带透明背景的视频。只有视频编码本身支持 alpha（如 WebM with VP8/VP9 + alpha，或 MOV with ProRes 4444），且用 播放时，浏览器才可能渲染透明像素。但这仍受限于：
- Chrome 和 Firefox 支持 WebM alpha，Safari 不支持（截至 Safari 17）
- 必须用
playsinline+autoplay+muted才能自动播放（移动端强制） - 即使源文件带 alpha，若父容器有背景色，也会“透出”该色，而非真正“透明”——最终效果仍取决于上下文
所以，别指望纯 CSS 让一个 JPG 封面的 MP4 变透明。该问题的本质是媒体格式能力边界，不是样式能绕过的。
