Question

我试图在Coverr.co的视频上添加灰色叠加层，但仍然在文本后面。我尝试使用rgba（）来添加颜色和不透明度，但它似乎并不适合我。下面是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我明白了。我在div之前添加了一个带有“filter”类的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*/
}

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

2 个答案: