原因很简单,因为在这两种情况下,由于top层的不透明度如何影响bottom层的 colored颜色 , colored颜色 组合是不同的.
对于第一种情况,您可以在顶层看到50% of blue%和50%的透明.透过透明部分,你可以在底层看到50%的红色(所以我们总共只看到25% of red).第二种情况(50% of red和25% of blue)的逻辑相同;因此,你会看到不同的 colored颜色 ,因为这两种情况下,我们没有相同的比例.
为了避免这种情况,两种 colored颜色 的比例必须相同.
下面是一个更好地说明和展示如何获得相同 colored颜色 的示例:
在顶层(内部跨度),我们有0.25
个不透明度(因此我们有25%的第一种 colored颜色 和75%的透明),然后在底层(外部跨度),我们有0.333
个不透明度(因此我们有1/3的75%=25%的 colored颜色 ,其余是透明的).我们在两层中的比例相同(25%),所以我们可以看到same color,即使我们颠倒层的顺序.
.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>
另外,白色背景也会影响 colored颜色 的渲染.其比例为50%,这将使逻辑结果为100%(25%+25%+50%).
您可能还注意到,如果顶层的不透明度大于0.5
,则两种 colored颜色 的比例不可能相同,因为first one will have more than 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
个 colored颜色 ,使顶层 colored颜色 的比例为opacity:1
%;因此它是opaque色.
为了得到更准确、更精确的解释,这里有一个公式,用于计算两层结合后的 colored颜色 ref:
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF是我们最后的 colored颜色 .ColorT/ColorB分别是顶色和底色.opacityT/opacityB分别是为每种 colored颜色 定义的顶部和底部不透明度:
factor
由该公式OpacityT + OpacityB*(1 - OpacityT)
定义.
很明显,如果我们切换两层,factor
不会改变(它将保持不变),但是我们可以清楚地看到每种 colored颜色 的比例都会改变,因为我们没有相同的倍增.
对于我们的初始情况,两个不透明度都是0.5
,因此我们将拥有:
ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor
如上所述,顶部 colored颜色 的比例为50%(0.5
),底部 colored颜色 的比例为25%(0.5*(1-0.5)
),因此切换图层也会切换这些比例;因此,我们看到了不同的 colored颜色 .
现在,如果我们考虑第二个例子,我们将有:
ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor
在本例中,我们有0.25 = 0.333*(1 - 0.25)
个图层,因此切换两个图层将没有任何效果;因此 colored颜色 将保持不变.
我们还可以清楚地识别这些琐碎的 case :
- 当顶层为
opacity:0
时,公式等于ColorF = ColorB
- 当顶层为
opacity:1
时,公式等于ColorF = ColorT