为什么两个堆叠的半透明盒子的最终颜色取决于顺序？
如何使两种情况下的颜色相同？
.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>Answers:
仅仅因为在两种情况下，颜色的组合都不一样，这是由于顶层的不透明度如何影响底层的颜色。
对于第一种情况，您会在顶层看到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％，那么两种颜色的比例就不可能相同一：
常见的琐碎情况是顶层具有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)），因此切换图层也会切换这些比例。因此我们看到了不同的最终颜色。
现在，如果我们考虑第二个示例，我们将有：
ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor
在这种情况下，我们必须0.25 = 0.333*(1 - 0.25)切换两层无效。因此颜色将保持不变。
我们还可以清楚地识别出一些琐碎的案例：
opacity:0的公式等于ColorF = ColorBopacity:1的公式等于ColorF = ColorT您可以使用css属性，mix-blend-mode : multiply （有限的浏览器支持）
.a {
background-color: rgba(255, 0, 0, 0.5);
mix-blend-mode: multiply;
}
.b {
background-color: rgba(0, 0, 255, 0.5);
mix-blend-mode: multiply;
}
.c {
position: relative;
left: 0px;
width: 50px;
height: 50px;
}
.d {
position: relative;
left: 25px;
top: -50px;
width: 50px;
height: 50px;
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
<div class="c a"></div>
<div class="d b"></div>
<div class="c b"></div>
<div class="d a"></div>您正在按以下顺序混合三种颜色：
rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))您会得到不同的结果。这是因为使用非交换3的普通混合模式1,2将前景色与背景色混合。由于它不是可交换的，因此交换前景色和背景色将产生不同的结果。
1混合模式是一种接受前景色和背景色，应用某些公式并返回所得颜色的功能。
2给定背景和前景色两种颜色，普通混合模式仅返回前景色。
3如果更改操作数的顺序不更改结果，则操作是可交换的，例如加法是可交换的（1 + 2 = 2 +1）而减法不是（1-2≠2-1）。
解决方案是使用可交换的混合模式：以任意顺序为同一对颜色返回相同颜色的混合模式（例如，乘以混合模式，将两种颜色相乘并返回结果颜色；或加深混合模式，其返回两者的深色）。
为了完整起见，以下是计算合成色的公式：
αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb
与：
Cs：前景色的颜色值
αs：前景色的alpha值
Cb：背景色的颜色值
αb：背景色的alpha值
B：混合功能
有关发生的情况的说明，请参阅Temani Afif的答案。
作为一种替代解决方案，您可以采用一个跨度，a例如，将其定位并在内部将其赋予较低的z索引b。然后，堆叠将始终相同：在第一行的b顶部绘制，a在第二行的a下方绘制b。
.a {
background-color: rgba(255, 0, 0, 0.5);
}
.b {
background-color: rgba(0, 0, 255, 0.5);
}
.b .a {position:relative; z-index:-1;}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>