不透明背景上的多个 div/类答案

【问题标题】：Multiple Divs / Classes On an Opaque Background不透明背景上的多个 div/类
【发布时间】：2011-12-10 06:35:52
【问题描述】：

我的目标（以及操作方法的问题）是在不透明区域上有黑色区域的不透明/白色背景作为内容持有者。这是我现在拥有的：

/* translucent background*/
.background 
{
    width:950px;
    height:1024px;
    margin: 9px auto 10px;

    background-color:#ffffff;
    opacity:0.35;
    filter:alpha(opacity=35); /* For IE8 and earlier */
    border-radius: 15px;
    -moz-border-radius: 15px;
    z-index:0;
}

/*content wrapper*/
.content 
{
    font-family: Arial;
    font-size: 11px;

    width:950px;
    height:1024px;
    margin: 9px auto 10px;

    border-radius: 15px;
    -moz-border-radius: 15px;
    z-index:1;
}

/*one of three content fields*/
.anounce_bar
{
    font-family: Arial;
    font-size: 16px;

    width:940px;
    height:225px;
    float: left;

    border: 5px 5px 5px 5px;

    background-color: black;
    border-radius: 15px;
    -moz-border-radius: 15px;
    z-index:2;
}

<div class="background"></div>
<div class="content">
    <!--Top announcement bar-->  
    <div class="anounce_bar">
    </div>

    <!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
    </div>

    <!--Right side content window-->
    <div class="content_window">

    </div>
</div>

现在它在半透明背景下方显示 anounce_bar.. 我如何让该栏（以及随后的导航和 content_window）位于 .background 之上？

注意：我还有其他内容，包括顶部的“标头”图片和背景 JPG，可能与此有关。

任何帮助将不胜感激。

更新：

这是不透明继承的问题 - 我使用的解决方法描述得非常好here

'background' 类变成了没有任何不透明度的#background，并添加了一个新项目：#background .transparency，具有绝对定位和不透明度。

<div id="background">
    <div class='transparency'></div>
    /*OTHER STUFF*/
</div>

【问题讨论】：

标签： css html opacity

【解决方案1】：

<div class="background">
    <div class="content">
    <!--Top announcement bar-->  
      <div class="anounce_bar" style="color: white">Anounce Bar</div>

    <!--Left side nav bar-->
      <div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>

    <!--Right side content window-->
    <div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
    </div>
</div>

Sample Code

【讨论】：

这解决了将一个放在另一个之上的问题，但现在 anounce_bar 也是不透明的..
@Maxxra -- 更新链接。如果这能解决您的问题，请告诉我jsfiddle.net/BN6Ce/3
'anounce_bar' 仍然显示半透明而不是纯黑色。

【解决方案2】：

更改顺序

<div class="anounce_bar"></div>
<div class="background"></div>

应该可以的。

【讨论】：

'anounce_bar' 在 'content' div 中。在 'content' div 之后放置 'background' div 似乎只是翻转了两者，而不是将一个放在另一个之上。
使用 Priya 给你的答案，但将其添加到背景中：'position:absolute;'关闭 div: '

' 并从内容中删除背景颜色。 jsfiddle.net/BN6Ce/4
这看起来可行，但我希望我的内容是相对的——它需要保留一个背景和一个“标头”图像。有没有办法做到这一点？
在你的图片和内容的jsfiddle中发布代码，我会帮助你（+1）
我通过执行此处描述的解决方法使其工作：stevenyork.com/tutorial/…，感谢您的帮助！