相关疑难解决方法(0)

我偶然发现了渲染两个重叠元素的问题,其中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

谢谢