堆叠的半透明盒子的颜色取决于订单吗? [英] 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不透明度(因此我们有1/3的75％=颜色的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:

factor由此公式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屋！