gpt4 book ai didi

html - 堆叠的半透明盒子的颜色取决于订单?

转载 作者:技术小花猫 更新时间:2023-10-29 11:30:39 25 4
gpt4 key购买 nike

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

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

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com