HTML/CSS通过多层实现透明效果

Question

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

例如：我有z-index为1,2,3,4的图层，其中1是红色。然后我创建了第“5”层，我想切穿2,3,4层的颜色，并看到红色。这可能吗？

- Jeppe

---

有趣。这些元素是兄弟还是子元素？ - Paul Redmond

您可以使用jQuery动态地玩弄底层图层的z-index。 - Tushar

Answer 1

您可以尝试使用新的mix-blend-mode和/或background-blend-mode（如果您有背景图像），这是目前推荐的合成和混合 Level 1。

参考文献：混合模式，以及mix-blend-mode。

请注意，目前不支持IE、Edge和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>

- Abhitalks

---

是的，我需要再仔细研究一下它的工作原理。具体是乘以什么？其他颜色组合都不能得到期望的结果，但还是谢谢你的回答。 - Jeppe

@Jeppe：这个参考链接可以让你清楚地了解不同的混合模式是如何工作的：https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode。根据想要的结果，需要仔细地制定它们。 - Abhitalks

@Jeppe：然而，我认为使用不同的图像会更适合你。那样会简单得多。没有其他办法。 - Abhitalks

Answer 2

多个元素的透明度

让我们试一试：

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>

似乎所有元素都有透明度。

- Persijn

---

是的，我知道透明度是如何工作的。但红色并没有显示在第五层中...是前四层的不透明度的组合。我使用颜色作为示例 - 它也可以是 .png 或其他东西。 - Jeppe

Answer 3

您可以在CSS中指定颜色和透明度，如果没有任何透明度的组合达到100％，则应该能够获得颜色的混合。

这将看起来像：

.elclass{
   background-color:#f00;
   opacity:.2; //20% opacity;
}

如果您不想让对象的不透明度为20%，而只是想要背景颜色，请使用以下代码：

.elclass{
   background-color:rgba(255,0,0,.2);
}

RGBA颜色并不是100%浏览器安全的。

- DRGA