Question

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

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

当它在视频后面时，有没有办法隐藏第二个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>

主要职位必须是相对的。就像背景课一样。

结果：