javascript - 如何隐藏视频元素后面的 div？

Question

我在 div 背景上方放置了一个视频，该视频有黑色背景，为了不可见视频背景，我使用了 mix-blend-mode: screen。

到目前为止一切正常。问题是当另一个元素位于视频后面时(点击动画)，但该元素仍然可见，因为视频的混合模式是屏幕。

有没有办法隐藏第二个 div，当它在视频后面时？

 video {
    position: absolute;
    margin-top: 0px;
    margin-left: 50px;
mix-blend-mode: screen;
  pointer-events:none;
}`

这是背景(不知道有没有关系)

    .background{
background-color: #7a7f83;
}

第二个div的颜色很亮(黄色、蓝色等)

编辑:这是较短的版本。 考虑 2 个 div 和一个视频。 一个 div 是背景，一个是矩形。 我想将视频放在两个 div 的上方，并且我将视频混合模式保持在屏幕上。 现在您可能知道，由于视频混合模式是屏幕，因此视频后面的所有内容都是可见的。 我希望背景 div 可见但矩形 div 不可见。 有没有办法隐藏视频后面的矩形 div 部分？

Answer 1

示例#1

将 Square 类位置设置为绝对位置，将父(背景)位置设置为相对位置。

.square{background-color: red;width: 100px;height: 100px;position: absolute; top: 50%; left: 50%;}
.background{position: relative;}

并且您的视频位于背景类元素中。像这样:

<div class="background">
    <video>...</video>
    <div class="square">SQUARE CLASS</div>
</div>

如果您对视频标签使用 z-index，您的方形 z-index 必须高于该值。

结果:

然后如果你想隐藏正方形，只需将其更改为 display:none;当您需要显示时，将其更改为显示: block ；

示例#2

执行您在示例 #1 中所做的任何操作，但您需要像这样更改您的 HTML:

<div class="main">
    <div class="square">SQUARE CLASS</div>
    <div class="background">
        <video>...</video>
    </div>
</div>

和主类的位置必须是相对的。就像背景类。

结果: