Calculate sum opacity from layers

问题

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.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/23806048/calculate-sum-opacity-from-layers

标签

css

opacity