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--blue之上。如果您希望视频显示在叠加层后面，您可以为其指定负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>

希望这有帮助

在网络摄像头视频上添加内容，即彩色叠加

1 个答案: