尝试在视频上添加半透明的叠加层

2024-05-08 • 问答

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

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

这将在您的视频上插入半透明的叠加层！如果您正在寻找一些与众不同的东西，请告诉我，我将重做我的回答：）

尝试在视频上添加半透明的叠加层

huhailongshiwo 回答：尝试在视频上添加半透明的叠加层

大家都在问