如何取消一个子元素的不透明度?

我想为父项应用不透明度,但我不希望子元素inheritance此不透明度。

<div class="parent"> <div class="child"></div> </div> .parent { opacity: 0.6; } 

有没有办法“取消”inheritance的不透明度? 也许强迫它为opacity=1的子元素?

如果孩子的不透明度是1,则孩子的不透明度总是父母的不透明度。

这不是inheritance问题,而是计算不透明度的方式。

例如,

 <div id="parent"> <div></div> </div> <div id="original"> </div> <div id="quarter"> </div> #parent div, #quarter { width: 100px; height: 100px; background-color: orange; } #parent div { opacity: 0.5; } #parent { opacity: 0.5; } #quarter { opacity: 0.25; } 

从你的angular度来看, #quarter的不透明度和#parent div是一样的,但实际上, #parent div#parent div的不透明度的#quarter 。 看到这个jsfiddle的更多细节: http : //jsfiddle.net/HUaNm/


避免这种情况的唯一方法是将孩子移出父母。 或者,根据你在这里的要求,你也可以使用rgba颜色作为父代的背景/边框/字体颜色来代替不透明度,但效果与应用不透明度不一样。