尝试在视频上添加半透明覆盖

Question

我正在尝试在视频上添加半透明覆盖。不知道如何在我的css中做到这一点。

css：

.video-div{
display: flex;
height: 22em;
width: 100%;
background-blend-mode: multiply;
background-color: #666666;
}

.videoTag{
object-fit: fill;
max-width: 100%;
width: 100%;
}

反应代码

Answer 1

* {
top: 0;
}
.video-div {
display: flex;
height: 22em;
width: 100%;
background-blend-mode: multiply;
background-color: #666666;
opacity: 0.6;
}
video {
width: 100%    !important;
height: auto   !important;
z-index: -1;
}

<div class="video-div">
<video controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
</video>
</div>

这将在您的视频上插入半透明覆盖！如果你正在寻找有点不同的东西，请告诉我，我会修改我的答案：(