计算图层的总不透明度 [英] Calculate sum opacity from layers

问题描述

我正在尝试使用CSS动画创建"AJAX旋转器".

I am trying to create an "AJAX-spinner" using CSS animations.

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

I have two layers with 70% opacity that sometimes overlap. The layers have the same color. When the layers overlap completely I want to replace them with a single layer.

我认为两层重叠将导致一个完全不透明的层，毕竟70 + 70为140.但这显然不是透明度的工作原理.重叠的两层仍然是透明的，我不知道是多么透明.

I figured that the two layers overlapping would result in a fully opaque layer, 70 + 70 is 140 after all. But that is not how opacity works apparently. The two layers overlapping is still transparent, what I can't figure out is how transparent.

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

The only thing I can find how to do is to calculate the resulting color, but that's not what I'm interested in. How can I find the resulting opacity?

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

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

更新

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

您可以看到两个橙色正方形重叠，以及颜色如何与背面的黑色正方形融合.

You can see the two orange squares overlapping, and how the color blends with the black square at the back.

推荐答案

这是StackOverflow解决此问题的问题

Here is StackOverflow question addressing this issue HERE

在您的情况下，第一个div阻止70％的背景光(因为不透明度为0.7).位于该块顶部的另一个div会保留剩余可见光的70％以上的背景光.

In your case first div block 70% background light (since opacity is 0.7). Another div which sits on top of that block more 70% background light of remaining visible light.

因此

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

因此，您应在第三格中使用不透明度0.91或91％.

Thus you should use opacity 0.91 OR 91% for your third div.

这篇关于计算图层的总不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！