CSS overlapping elements & opacity issue

Question

I\'ve stumbled upon an issue with rendering two overlapping elements with opacity = .5. The elements are exactly the same and positioned absolutely. One is on top of the oth

Answer 1

There are three items being added together:

• White background at 100%
• First picture at 50%
• Second picture at 50%

The first two make the first picture much lighter prior to mixing with the second picture.

Answer 2

Try and think of it like percentage sales. It's a bit different, but the analogy gives sense of what's happening. When a $10 item is 80% off, then you take off an additional 20%, it's' not 100% off (80% + 20%). You calculate final price like this:

$10 * (1 - 0.8)  = $2 * (1 - 0.2) = $1.60.

50% opacity means, 50% of the light is blocked. So when you stack two 50% opacity elements, that means 50% of the light is blocked and 50% more light is blocked by the additional layer. Since only 50% light is coming through the first layer, only 50% of that additional light is blocked. So the calculation would be:

50% + (50% * 50%) = 75% opacity.

DEMO

.num2 {
    opacity: 0.75;
}

Answer 3

Short answer: Opacity is not a linear function, so it doesn't add.

Longer answer: here or here