3

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

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

如何使蓝色框出现在顶部，没有任何不透明度？

4

5 回答 5

3

opacity您可以使用(Red - Green - Blue - Alpha)而不是使用rgba，这将为您带来所需的效果..

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

演示

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

于 2013-06-01T21:19:49.937 回答
2

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

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

#blue {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
}
于 2013-06-01T21:13:01.360 回答
1

您可以像这样构造您的 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;
}
于 2013-06-01T21:30:02.833 回答
0

你所犯的错误是把他们当作孩子。不透明度会影响孩子。当white不透明度是0.5当blue不透明度将是0.5均匀的1。更多文档在这里。

请参阅此答案以了解更多信息。

于 2013-06-01T21:16:52.157 回答
0

将 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;
}
于 2013-06-01T21:18:36.330 回答