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：

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

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

Answer 2

虽然您不能使用不透明度使后代元素比父元素更不透明，但您可以使用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

Answer 3

这是因为#icon-menu位于.box内，不透明度适用于所有儿童。这不是CSS特异性问题，而是应用不透明度的方式。

我的孩子div的不透明度继续从其父级继承。我怎么能阻止这种行为？

3 个答案: