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

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

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

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

为避免这种情况，您需要使两种颜色的比例相同。

下面是一个例子，可以更好地说明和展示我们如何获得相同的颜色:

在顶层(内部跨度)我们有 0.25 的不透明度(所以我们有 25% 的第一种颜色和 75% 的透明)然后是底层(外部跨度)我们有 0.333 不透明度(所以我们有 75% 的 1/3 = 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分别是为每种颜色定义的顶部和底部不透明度:

因子 由公式 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)) 所以切换图层也会切换这些比例；因此我们看到了不同的最终颜色。

现在，如果我们考虑第二个例子，我们将得到:

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

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

我们还可以清楚地识别微不足道的情况:

• 当顶层具有不透明度:0时，公式等于ColorF = ColorB
• 当顶层具有opacity:1时，公式等于ColorF = ColorT