如何取消一个子元素的不透明度?
我想为父项应用不透明度,但我不希望子元素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
颜色作为父代的背景/边框/字体颜色来代替不透明度,但效果与应用不透明度不一样。