为Coverr.co视频添加浅灰色叠加层？

Question

我试图在Coverr.co的视频上添加一个灰色叠加层，但仍在文本后面。我尝试使用rgba（）添加颜色和不透明度，但它似乎不适用于我。继承人的代码：

.video-container .filter { 
 
    z-index: 100; 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, 0.4); 
 
    width: 100%; 
 
}

<div class="video-container"> 
 
     <div class="filter"></div> 
 
      <video autoplay loop class="fillWidth"> 
 
      <source src="Productive-Morning/MP4/Productive-Morning.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. 
 
      <source src="Productive-Morning/WEBM/Productive-Morning.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. 
 
      </video> 
 
     <div class="poster hidden"> 
 
      <img src="Productive-Morning/snapshots/Productive-Morning.jpg" alt=""> 
 
     </div> 
 
    </div>

Answer 1

我知道了。我添加一个div类“过滤器”的DIV前，然后给它下面的CSS：只对当前屏幕不是为滚动

.bg-overlay { 
    background-color: rgba(0, 0, 0, 0.4); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

Answer 2

以上CSS工作。如果您想将其叠加到带有阴影的完整屏幕上，可以使用以下内容。

.bg-overlay { 
    background-color: rgba(0, 0, 0, 0.4); 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    z-index: 1; /* this index depends on how much z-index your layout extends. Suppose if any of dom element in page already has an z-index to 1 then this can 2 for this page*/ 
}