通过多层的 HTML/CSS 透明度

Question

是否可以创建一个元素，通过其“后面”的 x 层数创建透明度？

示例：我的图层的 z 索引为 1,2,3,4，而 1 是红色。然后，我创建一个“第 5”层，我想剪切第 2、3、4 层的颜色并透过它看到红色。那可能吗？

Answer 1

通过多个元素实现透明

让我们尝试一下：

div {
  width: 500px;
  height: 300px;
  border: 50px solid transparent;
}
.a1 {
  background-color: rgba(255, 0, 0, 1);
}
.a2 {
  background-color: rgba(255, 165, 0, 0.5);
}
.a3 {
  background-color: rgba(0, 128, 0, 0.5);
}
.a4 {
  background-color: rgba(0, 0, 255, 0.5);
}
.a5 {
  background-color: rgba(238, 130, 238, 0.5);
}

<div class="a1">
  <div class="a2">
    <div class="a3">
      <div class="a4">
        <div class="a5">
        </div>
      </div>
    </div>
  </div>
</div>

似乎所有元素都是透明的。