Question

我正在尝试使用CSS动画创建一个“AJAX-spinner”。

我有两层70％的不透明度，有时会重叠。这些层具有相同的颜色。当图层完全重叠时，我想用单层替换它们。

我认为两层重叠会导致完全不透明的层，70 + 70毕竟是140。但这并不是不透明的表现。两层重叠仍然是透明的，我无法弄清楚的是透明度。

我能找到的唯一办法就是计算得到的颜色，但这不是我感兴趣的。如何找到最终的不透明度？

.layer1,
.layer2 {
    color: orange;
    opacity: .7;
}

.layer3 {
    color: orange;
    opacity: ??;
}

更新

小提琴来说明问题：http://jsfiddle.net/m8zEX/3/

您可以看到两个橙色方块重叠，以及颜色如何与背面的黑色方块混合。

Answer 1

以下是解决此问题的问题的StackOverflow问题HERE

在你的情况下，第一个div阻挡70％背景光（因为不透明度是0.7）。位于该区域顶部的另一个div将剩余可见光的70％背景光。

因此，

Total Opacity = First Opacity + (100 - First Opacity) * Second Opacity
              = 0.7 + (1 - 0.7) * 0.7
              = 0.7 + (0.3) * 0.7
              = 0.7 + 0.21
              = 0.91

因此，您应该为第三个div使用不透明度0.91或91％。

Answer 2

opacity: .7;表示70%，如果您使用70%两次，则表示70% 70%。进行.49或49%的基本数学运算。

所以在你的问题中应用这个，你将得到这个结果：

.layer3 {
    color: orange;
    opacity: .49;
}

根据您的评论，我为您的问题设置了一个示例。从我在演示中看到的内容来看，它正在加起来，但它只是处理opacity: 1; - 请参阅我的演示right here

从图层计算总和不透明度

更新

2 个答案: