企业官网建设流程全解析

Video标签始终有一层半透明前景怎么办？实战排查(踩坑)记录

在今天的开发中，我接手了同事写的一个视频播放页面，测试时发现一个奇怪的问题：video标签上总是有一层半透明黑色的前景，遮挡了视频显示，简直让人怀疑人生。

我一开始以为是有遮罩层元素覆盖在上面，于是：

1. 使用浏览器开发者工具逐层排查 DOM。
2. 查看是否有伪类元素::before或::after。
3. 修改z-index到99999。
4. 尝试全屏播放视频。

结果发现，都无效样式表里也一切正常。

原视频在其他页面或者新建的 HTML 文件中是完全正常的，这说明问题不是视频本身。

视频样式分析

目前的样式如下：