css不透明度堆叠顺序答案

【问题标题】：css opacity stacking ordercss不透明度堆叠顺序
【发布时间】：2013-05-28 10:53:03
【问题描述】：

我正在尝试在图像顶部添加一个白色 div，然后为白色层添加不透明度，以便我可以在图像上放置文本。

HTML：

<div id="red">
    <div id="white">
        <div id="blue"></div>
    </div>
</div>

CSS：

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
}

http://jsfiddle.net/Nd2EZ/1/

背景呈现粉红色，非常棒。但是我想出现在顶部的蓝色盒子是蓝色的——但遗憾的是它是紫色的。因此，由于某种原因，蓝色框有点不透明。

我怎样才能让蓝色框出现在顶部，没有任何不透明度？

【问题讨论】：

不可能。不过，您可以使用一些额外的标记并将所需的 #white 内容放入 #blue 的同级元素中，并将该元素赋予 opacity:0.5
CSS Opacity That Doesn’t Affect Child Elements

标签： html css

【解决方案1】：

您可以使用rgba(Red - Green - Blue - Alpha)，而不是使用opacity，这将获得您想要的效果..

#white {
    background: rgba(255,255,255,.5);
    position: relative;
    z-index: -10;
}

Demo

顺便说一句，你真的需要z-index :-/ 吗？

【讨论】：

请注意，在 IE8 中 rgba 值将被忽略。不透明度也是如此，但有更直接的解决方法。
@ChrisD 有 polyfills 可用

【解决方案2】：

不透明度适用于所有内容，包括儿童。想象一下，孩子们首先被渲染，然后将不透明度应用于这个渲染的内容。如果元素不是子元素 - 即在不同的层次结构中并定位在上面 - 那么它不会受到（前一个）父元素的不透明度的影响。

<div id="red">
    <div id="white">
    </div>
</div>
<div id="blue"></div>

#blue {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
}

【讨论】：

【解决方案3】：

您可以像这样构建您的 HTML：

<div id="red">
    <div id="white"></div>
    <div id="blue"></div>
</div>

并将您的 css 更改为：

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
}
#white {
    background: white;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

【讨论】：

【解决方案4】：

你所犯的错误是把他们当作孩子。不透明度会影响孩子。当white 不透明度为0.5 时，blue 不透明度将为0.5 甚至1。 More documentation is here.

See this answer了解更多。

【讨论】：

【解决方案5】：

将 div#blue 移动为 div#red 的子元素，然后将 div#blue 的 css 样式位置设置为绝对；

HTML

<div id="red">
    <div id="white">
    </div>
    <div id="blue"></div>
</div>

CSS

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
    position:absolute;
    left:0em;
    top:0em;
}

【讨论】：