如何制作两个透明的div答案

【问题标题】：How to make two divs with transparency如何制作两个透明的div
【发布时间】：2013-05-22 05:15:26
【问题描述】：

我需要制作 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>

【问题讨论】：

标签： css html transparency z-index opacity

【解决方案1】：

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

喜欢：

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

Similar quesition

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

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

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

...等等。

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

【讨论】：