如何取消子元素的不透明度？ [英] how to cancel opacity for a child element?

问题描述

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

 < div class =parent> 
< div class =child>< / div> 
< / div> 
 
 .parent {
 opacity：0.6;有没有办法来取消继承的不透明度？。bb。b。b。b。b。b。  
 
解决方案
可能会强制它< c> opacity = 1 如果子项的不透明度为1，则子项的不透明度将始终为父项的不透明度。
 
 
 
这不是继承的问题， 
 
 
 
例如，
 < 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; 
} 
  
  #quarter 不透明度，从你的角度来看，与 #parent div 相同，但实际上， #parent div 有 #quarter 的两倍不透明度。有关详情，请参阅此jsfiddle： http://jsfiddle.net/HUaNm/  
 
 
 
 
 
 
避免这种情况的唯一方法是将子项移出父项。或者，根据您想要的内容，您也可以使用 rgba 颜色作为父项的背景/边框/字体颜色，而不是透明度，但效果不一样作为应用不透明度。 
 
I want apply opacity for parent but I do not want the child element to inherit this opacity.
<div class="parent">
 <div class="child"></div>
</div>

.parent {
  opacity: 0.6;
}
Is there a way to "cancel" the inherited opacity? maybe force it to opacity=1for the child element?
解决方案
The opacity of the child will always be the opacity of the parent if the opacity of the child is 1. 

This is not a problem with inheritance, but rather with the way opacity is calculated.

For instance, 
<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;
}
#quarter's opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/



The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity. 

                        
这篇关于如何取消子元素的不透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！