小编Mic*_*itt的帖子

想象一下，我们有两层背景。

• 底层是绿色的<div class="green"></div>。为简单起见，我们假设它只是一种颜色。但是在我的项目中，这一层包含一个css animation。

• 在它上面还有另一层蓝色<div class="blue"></div>。

• 现在，我想div在两者之上添加另一个，它显示绿色背景（我项目中的动画层）。

我能想到的最接近的例子是，如果你想象一个聚光灯。一切看起来都是黑色的，聚光灯四处移动并显露出背景。

基本上，这就是我所拥有的：

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div> 

它看起来像这样。请记住，绿色层是我项目中的动画。

问题：我怎样才能完成.reveal样式来实现上述行为。

• 第一个 div - 绘制.green背景（动画）
• 第二个 dv -.blue在它上面绘制背景
• 第三/第四/... divs - 位于两者之上，但它揭示了背景First div绘制的任何内容

注意：100%可用宽度和高度的第一个和第二个 div 覆盖。

.green {
    background-color: #159c82;
    width: 100vw;
    height: 100vh;
}

.blue {
    background-color: #1b4287;
    // I could change this to a sibling div and use,
    // position: absolute; …