如何取消子元素的不透明度？答案

【问题标题】：how to cancel opacity for a child element?如何取消子元素的不透明度？
【发布时间】：2011-05-10 02:22:38
【问题描述】：

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

<div class="parent">
 <div class="child"></div>
</div>

.parent {
  opacity: 0.6;
}

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

【问题讨论】：

看stackoverflow.com/questions/806000/…

标签： css 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 颜色作为父级的背景/边框/字体颜色而不是不透明度，但效果与应用不透明度不同。

【讨论】：

这让我发疯了。如果只有浏览器支持 opacity:1.5 或其他一些过度引用的方式，这将不是问题。

【解决方案2】：

如果您有父背景颜色 - 使用 RGBA，如果您有父图像 - 在父 div 和子 div 之间使用额外的 RGBA 层来播放 CSS 位置。

【讨论】：