Html 为什么半透明背景在不同的div中会发光_Html_Css_Alpha_Rgba

Html 为什么半透明背景在不同的div中会发光

html css

Html 为什么半透明背景在不同的div中会发光,html,css,alpha,rgba,Html,Css,Alpha,Rgba,我有一个包含3个元素的页面。一个在中间，有一个漂亮的背景图像；覆盖在上面的是第二个div，它有一个黑色半透明的背景，以便更好地阅读其中的文本除此之外，我还有一个完全白色背景的浮动div 出于某种奇怪的原因，当浮点数覆盖半透明div时，半透明背景似乎会渗入浮点数我的HTML+CSS来演示我的问题。如果将浏览器窗口变小，则右侧浮动将移向中间div。它将正确地保持红色，但与alpha插图相撞的位置除外为什么 #中心驾驶员{ 高度：300px；宽度：900px；保证金：0px自动0px自动；

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

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

出于某种奇怪的原因，当浮点数覆盖半透明div时，半透明背景似乎会渗入浮点数

我的HTML+CSS来演示我的问题。如果将浏览器窗口变小，则右侧浮动将移向中间div。它将正确地保持红色，但与alpha插图相撞的位置除外

为什么


#中心驾驶员{
高度：300px；
宽度：900px；
保证金：0px自动0px自动；
填充：0；
背景颜色：绿色；
}
#中心插图{
宽度：100%；
背景色：rgba（0,0,0,0.3）；
位置：相对位置；
顶部：225px；
高度：74px；
颜色：白色；
}
#漂浮物{
浮动：对；
宽度：200px；
高度：300px；
边框：1px实心；
明确：两者皆有；
背景色：rgba（250,0,0,1）；
边框：1px纯黑；
}
一些浮动文本
一些随机文本

您需要添加

z-index

position

以使z-index工作->

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

如果将“centerDiv”位置设置为相对位置，它将像您预期的那样工作。

好问题：我刚刚尝试了

z-index

，但它仍然是一样的！？！是的，我也试过使用z-index，也试过设置不透明度属性来强制浮动到完全不透明度。但一切都没有改变。奇怪的是，在最新的firefox、safari、chrome（是的，我知道它也是webkit，比如safari）和IE版本中也出现了同样的“bug”。所以我想这是标准中的一些东西，而不是具体的实现…啊，谢谢你！显然，位置是静态的（默认）还是相对的很重要。只有在“相对”中，它才会麻烦地查看z索引。谢谢！：）

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