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

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

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

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

Answer 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颜色作为父代的背景/边框/字体颜色来代替不透明度，但效果与应用不透明度不一样。