CSS重叠元素和不透明度问题

Question

我偶然发现了渲染两个重叠元素的问题,其中opacity = .5.元素完全相同,绝对定位.一个在另一个之上.常识告诉我们效果应该给我们一个100%不透明度(0.5 + 0.5 = 1)的图像,但事实并非如此.

如果有人愿意解释渲染这些元素的机制,我真的很感激,因为显然有一些我无法得到的潜在问题.

HTML:

<div class="test">
    <img src="..." alt="" width="200" height="200" class="t"/>
    <img src="..." alt="" width="200" height="200" class="t"/>   
</div>
<img src="..." alt="" width="200" height="200" class="test"/> 

CSS:

.test{
    float: left;
    position:relative;
    width: 200px;
    height: 200px;
}
.test .t{
    position:absolute;
    top:0;
    left:0;
    opacity: 0.5;
}

jsFiddle

谢谢

Answer 1

尝试并将其视为销售百分比.它有点不同,但这个比喻可以了解正在发生的事情.如果一个10美元的商品是80%的折扣,那么你再增加20%,这不是100%的折扣(80%+ 20%).你计算这样的最终价格:

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

50%的不透明度意味着50%的光被阻挡.因此,当您堆叠两个50%的不透明度元素时,这意味着50%的光被阻挡,50%的光被附加层阻挡.由于只有50%的光通过第一层,所以只有50%的额外光被阻挡.所以计算将是:

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

DEMO

.num2 {
    opacity: 0.75;
}