css - 不透明背景上的多个 Div/类

Question

我的目标(以及如何做的问题)是在不透明区域上有一个不透明/白色背景和黑色区域作为内容持有者。这是我现在拥有的:

/* 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 之上？

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

如有任何帮助，我们将不胜感激。

更新:

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

'background' 类变成了没有任何不透明度的#background，并添加了一个新元素:#background .transparency with absolute positioning and opacity。

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

Answer 1

改变顺序

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

这应该有效。