Geek Answers Handbook

CSS overrides rgba transpanrency

<!doctype> <html> <head> <style> div { background:rgba(0,255,255,0.3); } #div1 { width:300px; height:300px; } #div2 { width:200px; height:200px; } </style> </head> <body> <div id="div1"><div id="div2"></div></div><br/> </body>

What is the actual computed transparency of div2? I'm confused. This is an unknown number that is not 0.3 + 0.3 or 0.3 + 0.3 * 0.3

+5
source share
3 answers

The sum of the alpha channels can be calculated as:

alpha_top + alpha_bottom * (1 - alpha_top) =
0.3 + 0.3 * (1 - 0.3) =
0.3 + 0.3 * 0.7 =
0.3 + 0.21 =
0.51

For more details see Alpha Compositing @wikipedia , which gives the formula:

formula

or

formula

This is essentially the same formula that Bogdan Kushtan uses , and can also be found in this answer from bwoebi .

+6
source

Since you applied opacity to div{} , then that would be .3 for #div1{} and .3 * .3 = .09 for #div2{} , since # div1 has an opacity of .3 , and # div2 also uses opacity but currently holds .3 , so it will be multiplied for children.

0
source

his

(0.3 + 0.3) - (0.3 * 0.3) = 0.51

First you need to add overlapping transparency values ​​and subtract their multiplication. What for? I dont know. I don’t know how I know this, this is only one of such things as the distance between letters from Photoshop to CSS. You need to divide the PS value from 1000 and you will get the value in ems . Sorry for the offtopic.

0
source

More articles:


All Articles