javascript - 在网络摄像头视频之上添加内容，即颜色叠加

Question

我正在尝试向我的全屏视频标签添加蓝色叠加层，该标签从用户网络摄像头提取视频源(使用 JS 来执行此操作。)我无法让蓝色叠加层出现在视频，因为它显示在其后面，如果 div 未设置为绝对，视频将停止全屏 - 有什么想法吗？

<div class="fullscreen-bg">
<div class="overlay--blue">
    <video id="videoElement" class="fullscreen-bg__video"autoplay="true"></video>
</div>
</div>

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

.overlay--blue {
    background-color:rgba(19, 186, 228, 0.8);
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 1

由于 #videoElement 是 .overlay--blue 的子级，因此 #videoElement 将默认显示在 之上.overlay--蓝色。 如果您希望视频显示在叠加层后面，您可以为其指定负 z-index (z-index: -1;)。您还可以通过将视频移到叠加层之外、之前来编辑 HTML，如下所示:

<div class="fullscreen-bg">
    <video id="videoElement" class="fullscreen-bg__video"autoplay="true"></video>
    <div class="overlay--blue"></div>
</div>

希望这有帮助