Calculate sum opacity from layers

Question

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.

possible duplicate of [CSS overlapping elements & opacity issue](http://stackoverflow.com/questions/21295478/css-overlapping-elements-opacity-issue) — pstenstrm, May 22 '14 at 17:56

score 8 · Accepted Answer · edited May 23 '17 at 12:23

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.

Arko Elsenaar · Answer 2 · 2014-05-22T12:02:15.490

1

opacity: .7; means 70%, if you use 70% twice, that means 70% of 70%. Doing basic math that comes out to .49 or 49%.

So applying this in your question, you will have this result:

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

Based on your comment, I have set up an example for your issue. From what I see in my demo, it is adding up together, but it is just handling like opacity: 1; - please see my demo right here

edited May 22 '14 at 12:02

answered May 22 '14 at 11:54

Arko Elsenaar

1,689
3
18
33

3

That makes sense, but I don't apply 70% opacity twice to the same element, but to two different overlapping layers. The result should at least be higher than 70% – pstenstrm May 22 '14 at 11:58

Calculate sum opacity from layers

Update

2 Answers2

Linked