计算图层的不透明度总和

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%。