通过多层的 HTML/CSS 透明度

Question

是否可以创建一个元素，通过它“背后”的 x 层来创建透明度？

示例:我的图层的 z 索引为 1、2、3、4，而 1 是红色。然后我创建了一个“第 5”层，我想切断第 2、3、4 层的颜色并看到红色。这可能吗？

Answer 1

您可以尝试使用新的mix-blend-mode 和/或background-blend-mode(如果您有背景图片)目前正在为 Compositing and blending Level 1 推荐候选人.

引用文献:blend modes , 和 mix-blend-mode .

不过请注意，这是当前的 not supported by IE, Edge and Opera .

在下面的示例中，您可以看到顶级 div 显示 红色 从最低级 div 渗透。

示例片段:

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
div { 
    width: 120px; height: 120px;
    position: absolute; 
    top: 16px; left: 16px;
}
div:nth-of-type(2) { top: 32px; left: 32px; mix-blend-mode: difference; }
div:nth-of-type(3) { top: 48px; left: 48px; mix-blend-mode: overlay;}
div:nth-of-type(4) { top: 64px; left: 64px; mix-blend-mode: multiply; }

<div class="red">1</div>
<div class="blue">2</div>
<div class="green">3</div>
<div class="yellow">4</div>