CSS不透明度层叠顺序

Question

我想在一张图片的上方添加一个白色的层，然后给白色层添加透明度，这样我就可以在图片上方放置文字。

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/

背景颜色呈现为粉色，这很好。但是我想让蓝色框在上面呈现为蓝色，但不幸的是它却是紫色的。所以出现了一些透明度问题。如何使蓝色框完全不透明且在最上层？

- Nick Lang

---

不可能。但您可以使用一些额外的标记，将#white中所需的内容放入#blue的兄弟节点，并将该元素赋予opacity:0.5属性。 - user1950929

CSS不影响子元素的透明度 - Antony

Answer 1

不要使用 opacity，可以使用 rgba（红 - 绿 - 蓝 - 透明度），这将给您带来所需的效果。

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

演示

顺便问一下，你真的需要使用 z-index 吗？ :-/

- Mr. Alien

---

请注意，在IE8中会忽略rgba值。透明度也是如此，但是对于此问题有更直接的解决方法。 - ChrisD

@ChrisD 针对此问题有填充程序可用。 - Mr. Alien

Answer 2

透明度应用于所有内容，包括子元素。可以想象子元素首先被渲染，然后透明度被应用到这个已经渲染好的内容上。如果元素不是子元素——即在不同的层次结构中并且位于上方——那么它不会受到（前面）父元素的透明度影响。

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

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

- user2246674

Answer 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;
}

- Jonathon

Answer 4

将div#blue移动为div#red的子元素，然后将div#blue的CSS样式定位设置为absolute；

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;
}

- Brett Caswell

Answer 5

你所犯的错误是将它们视为子元素。透明度会影响到子元素。当 white 的透明度为 0.5 时，blue 的透明度也会变成 0.5，即使它本来是 1。更多文档在这里。

查看这个答案 以了解更多信息。

- iraycd