为什么半透明背景在不同的div中会透出来答案

【问题标题】：Why does a semi-transparent background shine through in a different div为什么半透明背景在不同的div中会透出来
【发布时间】：2014-02-26 07:04:58
【问题描述】：

我有一个包含 3 个元素的页面。一个在中心，带有漂亮的背景图像；覆盖在上面的是第二个 div，它有一个黑色的半透明背景，以便更好地阅读其中的文本。

除此之外，我还有一个全白背景的浮动 div。

由于某种奇怪的原因，当浮动覆盖半透明 div 时，半透明背景似乎渗入浮动。

我的 HTML + CSS 来演示我的问题。如果你让浏览器窗口变小，右边的浮动会向中心 div 移动。它会正确地保持红色，除了它碰到 alpha 插图的地方。

为什么？？

<!doctype html>
<head>
<style type="text/css">
#centerDiv {
   height: 300px;
   width: 900px;
   margin: 0px auto 0px auto;
   padding: 0 0;
   background-color: green;
}
#centerInset {
   width: 100%;
   background-color: rgba(0,0,0,0.3);
   position: relative;
   top: 225px;
   height: 74px;
   color: white;
}
#floater {
   float: right;
   width: 200px;
   height: 300px;
   border: 1px solid;
   clear: both;
   background-color: rgba(250,0,0,1);
   border: 1px solid black;
}
</style>
</head>
<body>
<div id="floater">
   <span>some floating text</span>
</div>
<div id="centerDiv">
   <div id="centerInset"><span>Some random text</span></div>
</div>
</body>
</html>

【问题讨论】：

好问题：我刚刚尝试过z-index，但还是一样！？！
是的，我也尝试过使用 z-index，还尝试设置 opacity 属性以强制浮动完全不透明。但什么都没有改变。奇怪的是，这个相同的“错误”似乎出现在最新的 firefox、safari、chrome（是的，我知道它也是 webkit，如 safari）和 IE 版本中。所以我会收集它是标准中的东西，而不是特定于实现的......

标签： html css alpha rgba

【解决方案1】：

您需要添加 z-index + position 以使 z-index 工作 -> jsfiddle

【讨论】：

啊，谢谢！显然，位置是静态的（默认）还是相对的很重要。只有相对而言，它才会费心查看 z-index。谢谢！ :)

【解决方案2】：

我不确定，但可能是这样的：当您将“centerInset”设为相对时，z-index 是相对于第一个具有非静态位置的父元素的。

如果你使“centerDiv”位置相对，它会像你期望的那样工作。

【讨论】：