css不透明度堆叠顺序

Posted 2023-03-06

【中文标题】css不透明度堆叠顺序

【英文标题】：css opacity stacking order

【发布时间】：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

【参考方案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;