通过多层的 HTML/CSS 透明度答案

【问题标题】：HTML/CSS transparency through multiple layers通过多层的 HTML/CSS 透明度
【发布时间】：2015-09-24 11:44:56
【问题描述】：

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

示例：我有 z-index 为 1、2、3、4 的图层，而 1 为红色。然后我创建一个“第 5”层，我想切开第 2、3、4 层的颜色并看到红色。这可能吗？

【问题讨论】：

有趣。元素是兄弟还是子元素？
您可以使用 jQuery 动态地玩弄底层的z index

标签： html css z-index transparency

【解决方案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>

【讨论】：

是的，我将不得不更多地了解它是如何工作的。究竟是什么乘法？任何其他颜色组合都不会产生预期的结果，但感谢您的回答。
@Jeppe：此参考资料将让您清楚了解不同混合模式的工作原理：developer.mozilla.org/en-US/docs/Web/CSS/blend-mode。人们需要根据自己追求的结果精心制作它们。
@Jeppe：但是，我确实觉得使用不同的图像会更适合您。那会简单得多。没有别的办法。

【解决方案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>

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

【讨论】：

是的，我知道不透明度是如何工作的。但是红色不是通过第 5 层显示出来的。第 1-4 层的不透明度的组合是。我以颜色为例 - 它也可能是 .png 或其他东西。

【解决方案3】：

您可以在css中指定该颜色的颜色和透明度，如果不透明度的总和都不是 100%，那么您应该能够获得颜色的混合。

看起来像：

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

如果您不希望对象的不透明度为 20%，而只是使用背景色：

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

然而，rgba 颜色并不是 100% 浏览器安全的。

【讨论】：