Html 堆叠半透明盒的颜色取决于订单？

为什么两个堆叠半透明框的最终颜色取决于订单

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

.a{
背景色：rgba（255,0,0,0.5）
}
.b{
背景色：rgba（0,0,255,0.5）
}

color1
不同的颜色2

，这仅仅是因为在这两种情况下，由于顶部层的不透明度如何影响底部层的颜色，颜色组合不相同

对于第一种情况，您可以在顶层看到50%的蓝色和50%的透明。通过透明部分，您可以在底层看到50%的红色（因此我们总共只看到25%的红色）。第二种情况的逻辑相同（50%的红色和25%的蓝色）；因此，你会看到不同的颜色，因为这两种情况下，我们没有相同的比例

为了避免这种情况，两种颜色的比例必须相同

下面是一个更好地说明和展示如何获得相同颜色的示例：

在顶层（内部跨度），我们有

0.25

的不透明度（因此我们有25%的第一种颜色和75%的透明），然后在底层（外部跨度），我们有

0.333

的不透明度（因此我们有1/3的75%=25%的颜色，其余是透明的）。我们在两层中的比例相同（25%），因此即使我们颠倒层的顺序，我们也会看到相同的颜色

.a{
背景色：rgba（255,0,0,0.333）
}
.b{
背景色：rgba（0,0,255,0.333）
}
.a>.b{
背景色：rgba（0,0,255,0.25）
}
.b>.a{
背景色：rgba（255,0,0,0.25）
}

color1
不同颜色2

您可以使用css属性（有限）

.a{
背景色：rgba（255,0,0,0.5）；
混合模式：倍增；
}
.b{
背景色：rgba（0,0,255,0.5）；
混合模式：倍增；
}
c{
位置：相对位置；
左：0px；
宽度：50px；
高度：50px；
}
博士{
位置：相对位置；
左：25px；
顶部：-50px；
宽度：50px；
高度：50px；
}

color1
不同颜色2

有关发生的情况的解释，请参见Temani Afif的回答。
作为替代解决方案，您可以选择一个span，例如，

a

，对其进行定位，如果位于

b

内，则为其提供较低的z索引。然后堆叠将始终相同：

b

绘制在第一行的

a

上方，而

a

绘制在第二行的

b

下方

.a{
背景色：rgba（255,0,0,0.5）；
}
.b{
背景色：rgba（0,0,255,0.5）；
}
.b.a{位置：相对；z索引：-1；}

color1
相同颜色2

您正在按以下顺序混合三种颜色：

• rgba（0,0,255,0.5）超过rgba（255,0,0,0.5）超过rgba（255,255,255,1））

• rgba（255,0,0,0.5）超过（rgba（0,0,255,0.5）超过rgba（255,255,1））

你会得到不同的结果。这是因为使用1,2（不是3）将前景色与背景色混合。由于它是不可交换的，所以交换前景和背景颜色将产生不同的结果

1混合模式是一个函数，它接受前景和背景颜色，应用一些公式并返回结果颜色

2给定背景和前景两种颜色，正常混合模式只返回前景颜色

3如果改变操作数的顺序不会改变结果，则运算是可交换的，例如加法是可交换的（1+2=2+1），而减法不是（1-2）≠ 2-1）

解决方案是使用可交换的混合模式：以任何顺序为同一对颜色返回相同颜色的模式（例如，倍增混合模式，将两种颜色相乘并返回结果颜色；或变暗混合模式，返回两种颜色中较暗的颜色）

$（函数（）{
$（“#模式”）。关于（“更改”，函数（）{
var mode=$（this.val（）；
$（“#demo”）.find（“.a，.b”）.css({
“混合模式”：混合模式
});
});
});
#演示>div{
宽度：12em；
身高：5公分；
利润率：1米0；
}
#演示>分区>分区{
宽度：12em；
高度：4em；
位置：相对位置；
顶部：.5em；
左：4em；
}
.a{
背景色：rgba（255,0,0,0.5）；
}
.b{
背景色：rgba（0,0,255,0.5）；
}

乘
屏幕
变暗
减轻
差异
排除
正常的
覆盖层
颜色减淡
色斑
强光
柔和的光线
色调
饱和
颜色
光度
我不知道这个问题的答案，但同样的事情也发生在photoshop中，多年来我一直认为这只是计算机色彩理论的一部分。我会四处看看，看看是否能找到更多的信息。不管它有什么价值，在现实生活中，同样的事情也会发生在任何不是100%透明且从正面发光的东西上。来自前方对象的光线越多，因此其颜色对最终颜色的影响就越大，即使两者都有50%的透明度。@YAHsaves:0和100的平均值为50（步骤1）。50和150的平均值为100（步骤2）。与之比较：150和0的平均值为75（步骤1）。75和100的平均值为87.5（步骤2）。问题是这三个数字的加权不正确。需要同时根据所有数字计算平均值；你不能一步一步地递归计算平均值。（请注意，平均计算基本上是一个50%的透明度计算。计算会因不同的透明度级别而改变，但原理保持不变）经验教训：使用“混合模式：倍增”时，我将获得一种与颜色无关的颜色