堆叠的半透明盒子的颜色取决于订单？

Question

为什么两个堆叠的半透明盒子的最终颜色取决于顺序？

如何使两种情况下的颜色相同？

.a {

  background-color: rgba(255, 0, 0, 0.5)

}



.b {

  background-color: rgba(0, 0, 255, 0.5)

}


<span class="a"><span class="b">          Color 1</span></span>

<span class="b"><span class="a">Different Color 2</span></span>

Answer 1

仅仅是因为在两种情况下，由于 顶层的 不透明度如何影响 底层 的颜色，颜色的组合并不相同。

对于第一种情况，您会在顶层看到 50％的蓝色 和50％的透明。通过透明部分，您可以在底层看到50％的红色（因此，我们总共只能看到
25％的红色 ）。第二种情况的逻辑相同（ 红色的50％ 和 蓝色的25％
）；因此您会看到不同的颜色，因为在两种情况下我们的比例都不相同。

为避免这种情况，两种颜色的比例必须相同。

这是一个示例，可以更好地说明和展示如何获得相同的颜色：

在顶层（内部跨度）中，我们具有0.25不透明性（因此，我们具有第一种颜色的25％和透明性的75％），然后对于底层（外部跨度）中，我们具有0.333不透明性（因此，我们具有1/3的75％=颜色的25％，其余为透明）。我们在两个图层中所占的比例相同（25％），因此即使颠倒图层的顺序，我们也会看到
相同的颜色 。

.a {

  background-color: rgba(255, 0, 0, 0.333)

}



.b {

  background-color: rgba(0, 0, 255, 0.333)

}



.a > .b {

  background-color: rgba(0, 0, 255, 0.25)

}

.b > .a {

  background-color: rgba(255, 0, 0, 0.25)

}


<span class="a"><span class="b">          Color 1</span></span>

<span class="b"><span class="a">Different Color 2</span></span>

附带说明，白色背景也影响颜色的呈现。它的比例是50％，这将得出100％的逻辑结果（25％+ 25％+ 50％）。

您可能还会注意到，如果顶层的不透明度大于，0.5因为 第一 层的不透明度大于50％，第二层的不透明度 小于50％
，那么两种颜色的比例就不可能相同一：

.a {

  background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/

}



.b {

  background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/

}



.a > .b {

  background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/

}

.b > .a {

  background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/

}


<span class="a"><span class="b">          Color 1</span></span>

<span class="b"><span class="a">Different Color 2</span></span>

常见的琐碎情况是顶层具有opacity:1使顶层颜色比例为100％的图层；因此它是 不透明的 颜色。

为了更准确，更准确地进行说明，以下是用于计算颜色的公式，我们将两层结合起来后会看到ref：

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF 是我们的最终颜色。 ColorT / ColorB 分别是顶部和底部的颜色。 opacityT /
opacityB 分别是为每种颜色定义的顶部和底部不透明度：

在factor由如下公式定义OpacityT + OpacityB*(1 - OpacityT)。

显然，如果我们切换两个图层，factor则不会改变（它将保持不变），但是我们可以清楚地看到每种颜色的比例都会改变，因为我们没有相同的乘数。

对于我们最初的情况，两种情况都是0.5这样，所以我们将有：

ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor

如上面所解释的，顶部颜色的比例为50％（0.5），底部颜色的比例为25％（0.5*(1-0.5)），因此切换图层也将切换这些比例。因此，我们看到了不同的
最终 颜色。

现在，如果我们考虑第二个html" target="_blank">示例，我们将有：

ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor

在这种情况下，我们必须0.25 = 0.333*(1 - 0.25)切换两层无效。因此颜色将保持不变。

我们还可以清楚地识别出一些琐碎的案例：

• 当顶层opacity:0的公式等于ColorF = ColorB
• 当顶层opacity:1的公式等于ColorF = ColorT