我发现一个问题,渲染两个与opacity = .5重叠的元素.元素完全相同,绝对定位.一个在另一个之上.
常识告诉我们,效果应该给我们一个100％的不透明度(0.5 0.5 = 1)的图像,但是它不会.如果有人关心渲染这些元素的机制,我真的很感激,因为显然有一些根本的问题我没有得到.
HTML：
常识告诉我们,效果应该给我们一个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.
.num2 {
opacity: 0.75;
}
