堆叠半透明盒子的颜色取决于订单? [英] Color of stacked semi-transparent boxes depends on order?

问题描述

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

Why does the final color of two stacked semi-translucent boxes depend on the order?

我怎样才能让它在两种情况下都得到相同的颜色?

How could I make it so that I get the same color in both cases?

.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>

推荐答案

仅仅是因为在这两种情况下，由于 top 层的不透明度会影响底层层.

Simply because in both cases the combination of colors is not the same due to how opacity of the top layer affect the color of the bottom layer.

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

For the first case, you see 50% of blue and 50% of transparent in the top layer. Through the transparent part, you see 50% of red color in the bottom layer (so we only see 25% of red in total). Same logic for the second case (50% of red and 25% of blue); thus you will see different colors because for both cases we don't have the same proportion.

为避免这种情况，您需要为两种颜色设置相同的比例.

To avoid this you need to have the same proportion for both your colors.

这里有一个例子来更好地说明和展示我们如何获得相同的颜色:

Here is an example to better illustrate and show how we can obtain same color:

在顶层(内部跨度)中，我们有 0.25 的不透明度(所以我们有 25% 的第一种颜色和 75% 的透明)，然后是底层(外部跨度)我们有 0.333 不透明度(所以我们有 75% 的 1/3 = 25% 的颜色，其余的是透明的).我们在两层中的比例相同 (25%)，因此即使我们颠倒层的顺序，我们也会看到相同的颜色.

In the top layer (the inner span) we have 0.25 of opacity (so we have 25% of the first color and 75% of transparent) then for the bottom layer (the outer span) we have 0.333 opacity (so we have 1/3 of 75% = 25% of the color and the remaining is transparent). We have the same proportion in both layers (25%) so we see the same color even if we reverse the order of layers.

.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%).

As a side note, the white background is also affecting the rendering of the colors. Its proportion is 50% which will make the logical result of 100% (25% + 25% + 50%).

您可能还注意到，如果顶层的不透明度大于 0.5，我们的两种颜色的比例不可能相同，因为 第一个将有更多低于 50%，第二个仍将低于 50%:

You may also notice that it won't be possible to have same proportion for our both colors if the top layer is having an opacity bigger than 0.5 because the first one will have more than 50% and it will remain less than 50% for the second one:

.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%；因此它是一种不透明颜色.

The common trivial case is when the top layer is having opacity:1 which make the top color with a proportion of 100%; thus it's an opaque color.

为了更准确和准确的解释，这里是用于计算我们在两个图层组合后看到的颜色的公式^参考:

For a more accurate and precise explanation here is the formula used to calculate the color we see after the combination of both layers^ref:

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

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

ColorF is our final color. ColorT/ColorB are respectively the top and bottom colors. opacityT/opacityB are respectively the top and bottom opacities defined for each color:

因子由这个公式OpacityT + OpacityB*(1 - OpacityT)定义.

很明显，如果我们切换两层，factor 不会改变(它将保持不变)但我们可以清楚地看到每种颜色的比例会改变，因为我们没有乘数相同.

It's clear that if we switch the two layers the factor won't change (it will remain a constant) but we can clearly see that the proportion for each color will change since we don't have the same multiplier.

对于我们的初始情况，两个不透明度都是 0.5 所以我们将有:

For our initial case, both opacities are 0.5 so we will have:

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

如上所述，顶部颜色的比例为 50% (0.5)，底部颜色的比例为 25% (0.5*(1-0.5)) 所以切换图层也会切换这些比例；因此我们看到了不同的 final 颜色.

Like explained above, the top color is having a proportion of 50% (0.5) and the bottom one is having a proportion of 25% (0.5*(1-0.5)) so switching the layers will also switch these proportions; thus we see a different final color.

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

Now if we consider the second example we will have:

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

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

In this case we have 0.25 = 0.333*(1 - 0.25) so switching the two layers will have no effect; thus the color will remain the same.

我们也可以清楚地识别出琐碎的案例:

We can also clearly identify the trivial cases:

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

• When top layer is having opacity:0 the formula is equal to ColorF = ColorB
• When top layer is having opacity:1 the formula is equal to ColorF = ColorT

这篇关于堆叠半透明盒子的颜色取决于订单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！