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 ..如何让条形码（以及后续的nav＆amp; content_window）在.background之上？

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

任何帮助都会非常感激。

更新

这是不透明度继承的问题 - 我使用的工作描述非常好here

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

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

Answer 1

更改订单

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

这应该有效。

Answer 2

<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

在不透明的背景上的多个Div / Classes

2 个答案: