Question

我需要制作div，例如不透明度：0.5，其中的内部将是另一个div，它不会透明。我无法理解这一点。即使我将内部div的z-index设置为高于out 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>

Answer 1

试试这个

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

Answer 2

不透明度继承非常挑剔。您可以尝试破解它，或在rgba()上使用#outer（删除不透明度和z-index）

像：

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

Similar quesition

Answer 3

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

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

......等等。

唯一的另一个选择 - 如果你决定坚持使用opacity - 是将内部div放在容器之外并将其重新定位在.outer div的顶部。（你需要将它们包装在另一个带有position: relative的容器中，然后将内部div放在绝对位置。）

如何制作两个具有透明度的div

3 个答案: