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

Question

我就是想不通为什么 <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，但没有任何效果。你知道哪里出了问题吗？

Answer 1

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

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

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