HTML视频上的半透明覆盖始终位于视频后面

Question

我在一个元素中有以下HTML代码：

<div id="video-container">
<video id="video" autoplay muted loop>
<source src="my-video.mp4" type="video/mp4">
<img src="backup-img.png">
</video>
</div>

我正试图通过rgba使用以下CSS添加滤色器覆盖：

#video-container{
content:"";
position: absolute;
min-width: 100vw; 
min-height: 100vh;
background-color:rgba(10,10,10,0.8);
z-index: 100;
}
#video{
position: relative;
z-index:-100;
}

问题是，无论我对#video容器和#video做什么，当我测试它时，带有rgba风格的层总是在视频后面。我尝试过使用z索引，添加空内容，但似乎没有什么能让层超过视频的顶部。

理想情况下，无论屏幕尺寸如何，过滤层都应该与视频大小相同，但我还不能达到这一点，因为过滤层拒绝在顶部。

我拥有的所有浏览器(firefox、chrome、edge(似乎都是这样

有什么想法吗？

Answer 1

您可以在#video容器之后或之前添加，如下所示：

#video-container::after {
content:"";
position: absolute;
min-width: 100vw; 
min-height: 100vh;
background-color:rgba(10,10,10,0.8);
z-index: 100;
left: 0;
top: 0;
}

如果你想让透明层与你的视频大小相同，请在你的容器中添加相对位置：

#video-container { position: relative;} 

并将伪类的宽度和高度更改为100%；

#video-container::after {
content:"";
position: absolute;
width: 100%; 
height: 100%;
background-color:rgba(10,10,10,0.8);
z-index: 100;
left: 0;
top: 0;
}

不管怎样，它的大小相当于具有第一个相对位置的父对象。

Answer 2

更新：

我刚刚发现了wierd的行为。之所以会发生这种情况，是因为The child element is in a lower stacking context due to its parent’s z-index level。

这个问题有两种解决方案：

1.将#videoimg元素移到**#video-container**父元素之外，并移到页面的主堆栈上下文中。

HTML:

<div id="video-container"></div>
<img id="video" src="http://placekitten.com/g/500/300" />

CSS:

#video-container {
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(10, 255, 51, 0.8);
z-index: 100;
}
#video {
position: absolute;
z-index: -100;
}

2.从#video-container中删除定位，这样就不会限制#video's的z索引。

#video-container {
width: 100vw;
height: 100vh;
background-color: rgba(10, 255, 51, 0.8);
}
#video {
position: absolute;
z-index: -100;
}

<div id="video-container">
<img id="video" src="http://placekitten.com/g/500/300" />
</div>

从链接获取更多信息：https://coder-coder.com/z-index-isnt-working/