Calculate sum opacity from layers
css, opacity
Solution
Here is StackOverflow question addressing this issue HERE
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.
Thus,
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
Thus you should use opacity 0.91 OR 91% for your third div.
Problem
I am trying to create an "AJAX-spinner" using CSS animations. 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. 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: ??; } ``` Update Fiddle to illustrate the problem: 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.