找到你要的答案

Q:CSS overlayed rgba transpanrency

Q:CSS叠加RGBA透明性

<!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 actually computed transparency of div2? I am confused. It is a unknown number that is not 0.3+0.3 or 0.3+0.3*0.3

<!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>

实际计算透明度的格式是什么?我困惑。这是一个未知数,不是0.3 + 0.3或0.3 + 0.3 * 0.3

answer1: 回答1:

The sum of 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 explanation, see Alpha Compositing @ wikipedia, which lists the formula as:

or

This is essentially the same formula used by Bogdan Kuštan and it can also be found in this answer by bwoebi.

α通道的总和可以计算为:

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

更多的解释,看到的alpha合成@维基百科,其中列出的公式为:

This is essentially the same f或mula used by Bogdan Kuštan and it can also be found in this answer by bwoebi.

answer2: 回答2:

Since you have applied opacity in div{} then this would be .3 for #div1{} and .3 * .3 = .09 for #div2{} as #div1 has opacity value .3 and #div2 also use opacity but is currently holding .3 so it's going to be multiplied for children.

Since you have applied opacity in div{} then this would be .3 f或 #div1{} and .3 * .3 = .09 f或 #div2{} as #div1 has opacity value .3 and #div2 also use opacity but is currently holding .3 so it's going to be multiplied f或 children.

answer3: 回答3:

its

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

First You need to add overlapping transparency values, and subtract their multiplication. Why? I don't know. I don't event know how I know it, it just one of those things like letter spacing from PhotoShop to CSS, You need to divide PS value from 1000, and You get value in ems. Sorry for offtopic.

它的

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

First You need to add overlapping transparency values, and subtract their multiplication. Why? I don't know. I don't event know how I know it, it just one of those things like letter spacing from PhotoShop to CSS, You need to divide PS value from 1000, and You get value in ems. S或ry f或 offtopic.

html  css