0

我需要制作 div，例如 opacity:0.5，它的内部将是另一个 div，它不会是透明的。我想不通。即使我将内部 div 的 z-index 设置为高于外部 div，它仍然是透明的。现在我得到了这样的：

<div id="outter" style="opacity:0.5; z-index:-1">
    <div id="inner" style="opacity:1; z-index:1">
        <img src="someImg.jpg" />
    </div>
</div>
4

3 回答 3

4

尝试这个

<div id="outter" style="background-color: rgba(255, 255, 255, 0.5);">
    <div id="inner" style="opacity:1; z-index:1">
        <img src="Your image" />
    </div>
</div>
于 2013-05-27T11:09:10.033 回答
2

不透明度继承是相当挑剔的。您可以尝试破解它，或使用rgba()on #outer（删除不透明度和 z-index）

喜欢：

#outter { background: rgba(0, 0, 0, 0.5); }

类似的问题

于 2013-05-27T11:11:08.993 回答
0

opacity被所有孩子继承，所以在这种情况下它不是那么有用。更好的选择是使用rgba颜色。因此，例如，您可以将外部 div 的颜色设置为

.outer {background: rgba(0,0,0,0.1);}

... 等等。

唯一的其他选择——如果你决定坚持opacity——就是将内部 div 放在容器之外，并将其重新定位在.outerdiv 的顶部。（您需要将它们都包装在另一个容器中position: relative才能做到这一点，然后将内部 div 相对于它绝对定位。）

于 2013-05-27T11:08:22.043 回答