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

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

.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层的 colored颜色 , colored颜色 组合是不同的.

对于第一种情况,您可以在顶层看到50% of blue%和50%的透明.透过透明部分,你可以在底层看到50%的红色(所以我们总共只看到25% of red).第二种情况(50% of red25% 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

Css相关问答推荐

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

我找不出Firefox上奇怪的css行为的原因

使用高图的背景大小渐变

如何在横向和纵向布局上使用 CSS 网格中的纵横比来保持纵横比

为什么我的 CSS 转换在 React 18 中不起作用

css ::part 伪 Select 器 Chrome 兼容性?

Flex & space-around 与内容相交

CSS 字符串变量的正确null值是多少?

父母是内联块,子元素有%填充=奇怪的行为

如何在 flex-wrap 中优先考虑第一行?

React Typescript 中的自动 typewriter 效果

如何在每一行周围放置不同大小的阴影?

具有自动调整大小的自动填充行的 CSS 网格

CSS - 等高列?

重置子元素的不透明度 - Maple Browser (Samsung TV App)

如何填充 100% 的剩余高度?

如何强制显示垂直滚动条?

我的 inline-block 元素没有正确排列

为什么对 HTML 表单而不是表格使用定义列表(DL、DD、DT)标签?

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?