Добавление светло-серого наложения в видео Coverr.co?

Question

Я пытаюсь добавить серый оверлей на видео с Coverr.co, но все еще позади текста. Я попытался использовать rgba(), чтобы добавить цвет и непрозрачность, но, похоже, это не работает для меня. Heres код:

.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*/ 
}