我的孩子 div 的不透明度一直从其父级继承。我怎样才能阻止这种行为？答案

【问题标题】：My child div's opacity keeps inheriting from its parent. How can I stop that behavior?我的孩子 div 的不透明度一直从其父级继承。我怎样才能阻止这种行为？
【发布时间】：2014-10-13 20:11:55
【问题描述】：

我根本不明白为什么<div id="icon-menu"> 仍然具有与祖先<div class="box"> 相同的不透明度。据我所知，根据 CSS 的特殊性，这不应该发生。

<div class="jumbotron">    
    <div class="box">
        <div id="icon-menu" style="opacity: 1">
            <i class="fa fa-bars"></i>
            Menu
        </div>
    </div>
</div>

这是我的 CSS：

.box {
    background-color: #000000;
    height: 60px;
    min-width: 100%;
    opacity: 0.5;
}

#icon-menu {
    opacity: 1;
    padding-left: 75px;
    position: fixed;
    color: #ffffff;
    font-size: 40px;
}

如您所见，我尝试了一些方法将 <div id="icon-menu:> 的不透明度改回 1，但没有任何效果。你知道出了什么问题吗？

【问题讨论】：

一个孩子不能比它的父母更不透明
孩子会受到父母不透明度的影响。 Parent div transparent background but not affect child div transparency 的可能重复项
I do not want to inherit the child opacity from the parent in CSS的可能重复

标签： html css opacity

【解决方案1】：

您不能覆盖子元素中的不透明度。来自 MDN：

该值适用于整个元素，包括其内容，即使该值不被子元素继承。因此，一个元素及其包含的子元素都具有相同的不透明度相对到元素的背景，即使元素及其子元素有相对于彼此不同的不透明度。

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

【讨论】：

【解决方案2】：

虽然您不能使用 opacity 使后代元素比父元素更不透明，但您可以使用 rgba 着色来做您想做的事情：

.box {
    background-color: rgba(0, 0, 0, .5);
    height: 60px;
    min-width: 100%;
}
#icon-menu {
    background-color: rgba(0, 0, 0, 1);
    padding-left: 75px;
    position: fixed;
    color: #ffffff;
    font-size: 40px;
}

jsFiddle example

【讨论】：

谢谢，帮了大忙！

【解决方案3】：

这是因为#icon-menu 在.box 内部，并且不透明度适用于所有孩子。这不是 CSS 特定性问题，而是应用不透明度的方式。

【讨论】：