为什么两个堆叠的半透明盒子的最终颜色取决于顺序?
我怎样才能在两种情况下得到相同的颜色?
.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 层的不透明度如何影响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
关于html - 堆叠的半透明盒子的颜色取决于订单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50574524/