Hinzufügen eines hellgrauen Overlays zu einem Coverr.co Video?

Question

Ich versuche, ein graues Overlay auf einem Video von Coverr.co hinzuzufügen, aber immer noch hinter dem Text. Ich habe versucht, mit rgba() die Farbe und Deckkraft hinzuzufügen, aber es scheint nicht für mich zu arbeiten. Heres der Code:

.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

ich es bekam. Ich habe ein div vor dem div mit der Klasse „Filter“ und dann gab es die folgenden 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

Die obige CSS Arbeit nur für den aktuellen Bildschirm nicht für die gescrollt. Wenn Sie dies mit dem ausgeblendeten vollständigen Bildschirm überlagern möchten, können Sie Folgendes verwenden.

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