div和不透明度有问题

Question

好吧，我想做的是以下事情：

1. 拥有一个带有背景图片的div
2. 第一个div浮动，不透明度为.50，背景颜色为
3. 第三个div浮点数带有文字。

我正在使用以下CSS和HTML，但无法正常工作。顶部的div被分配为下面的div的不透明度。我认为这与父div有关，我该如何解决？

#mbox {width:100%; height:150px; background:url(makerback.png)}
#mbox2 {width:100%; height:150px; background:#000000; opacity:.75;}
#mbox3 {width:80%; margin:0 auto; top:auto; bottom:auto; height:100px; text-align:center; color:white; line-height:100px; font-weight:bold; font-size:20pt; opacity:.;}

<div id="mbox">
    <div id="mbox3">
        <div id="mbox2">TEST TEXT</div>

    </div>
</div>

Answer 1

我认为一切都按预期工作，除了不透明性也应用于#mbox2。

由于它在#mbox3的范围内，因此它还将具有opacity: .5。

我相信这可能会使人产生幻觉，即其背后的整个图像也逐渐淡出。

很难想象，但是如果您不希望其继承不透明度，则应将文本元素放置在容器旁边。

然后，您可以使用#mbox将其移动到父position: absolute div的范围内。

无论哪种方式，我都创建了一个JSFiddle来满足您的需求。

Answer 2

如果我理解您的问题，则希望文本位于前面，然后您的div带有一些背景颜色，而最后一个父div带有背景图像。

您可以使用#mbox2阻止background-color: rgba() div继承不透明度，并在其中设置不透明度级别。

这是一支笔：Pen for the answer，

希望有帮助。