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

我发现一个问题,渲染两个与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;
}

jsFiddleThanks

解决方法

尝试想像它的百分比销售.这有点不一样,但是比喻可以说明发生了什么.当一个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;
}

原文地址：https://www.jb51.cc/css/214551.html