Question

我尝试在图像上添加一个白色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/

背景显得粉红色，很棒。但我希望蓝色的盒子出现在蓝色的顶部 - 但遗憾的是它是紫色的。所以蓝盒子由于某种原因有点不透明。

如何让蓝色框显示在顶部，没有任何不透明度？

Answer 1

您可以使用opacity（红色 - 绿色 - 蓝色 - Alpha）代替使用rgba，这样可以获得所需效果。

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

Demo

顺便说一下，你真的需要z-index： - /？

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

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

Answer 4

你所做的错误就是将他们当作孩子。不透明度会影响孩子。如果white不透明度为0.5，则blue不透明度为0.5，{偶数为1。 More documentation is here

See this answer了解更多信息。

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

css不透明堆叠顺序

5 个答案: