Question

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

div2的实际计算透明度是多少？我很迷惑。未知数不是0.3 + 0.3或0.3 + 0.3 * 0.3

Answer 1

Alpha通道的总和可以计算为：

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 Compositing @ wikipedia，其中列出的公式为：

$\alpha_o = \alpha_a + \alpha_b \left(1 - \alpha_a\right)$

或

$\alpha_o = 1 - (1 - \alpha_a) (1 - \alpha_b)$

这与used by Bogdan Kuštan基本相同，也可以在this answer by bwoebi中找到。

Answer 2

由于您已在div{}中应用了不透明度，因此.3的{{1}}和#div1{}的{{1}}因为＃div1具有不透明度值{{1} }和＃div2也使用不透明度，但目前持有.3 * .3 = .09所以它会成倍增加。

Answer 3

它的

（0.3 + 0.3） - （0.3 * 0.3）= 0.51

首先您需要添加重叠的透明度值，并减去它们的乘法。为什么？我不知道。我不知道我怎么知道它，它只是像PhotoShop到CSS之间的字母间距之一，你需要将PS值除以1000，并且你在ems得到了价值。对不起offtopic。

CSS覆盖了rgba transpanrency

3 个答案: