Css 不透明背景上的多个div/class

我的目标和如何做的问题是在不透明区域上有一个不透明/白色背景和黑色字段，作为内容持有者。以下是我现在拥有的：

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

现在，它在半透明背景下显示了一个环形条。。如何使工具栏和后续的导航和内容窗口位于背景之上

注意：我还有其他内容，包括一个顶部的“报头”图像和一个背景JPG，这可能会搞乱它

任何帮助都将不胜感激

更新：

这是不透明继承的一个问题——我使用的工作描述得非常好

“background”类变成了没有任何不透明度的背景，并添加了一个新项：background.transparency，带有绝对位置和不透明度

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

改变顺序

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

这应该行得通

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

---

“anounce_bar”位于“content”div内。将“background”div置于“content”div之后似乎只是将两者翻转过来，而不是将一个置于另一个之上。使用Priya给您的答案，但将其添加到背景中：“position:absolute；”关闭div:并从内容中删除背景色。这看起来很有效，但我希望我的内容是相对的——有一个背景和一个“报头”图像，它需要保留。有什么方法可以做到这一点吗？将代码发布到JSF中，在您的图片和内容中间，我将帮助您+1我通过执行此处描述的解决方法使其正常工作：，感谢您的帮助！这解决了将一个放在另一个上面的问题，但是现在Anound_条也是不透明的。@Maxxra-更新链接。。如果这解决了问题，请告诉我“Anound_条”仍然显示半透明而不是纯黑色。