html - 向 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

我明白了。我在类为“filter”的 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;
}