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

【问题标题】：Trying to add a translucent overlay over video尝试在视频上添加半透明覆盖
【发布时间】：2019-11-04 21:36:35
【问题描述】：

我正在尝试在我的视频上添加半透明叠加层。不知道如何在我的 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%;
  }

React code

【问题讨论】：

也发布html
检查这个answer，在stackoverflow上。

标签： javascript html css reactjs

【解决方案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>

这将在您的视频上插入一个半透明的叠加层！如果您正在寻找一些不同的东西，请告诉我，我会修改我的答案:)

【讨论】：