不透明背景上的多個div /類

我的目標（以及如何操作的問題）是在不透明區域上具有帶有黑色字段的不透明/白色背景以充當內容持有者。以下是我現在有：不透明背景上的多個div /類

/* 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）去系統技術領域的頂級？

注意：我還有其他內容，包括頂部'masthead'圖片和背景JPG，可能與此有關。

任何幫助將非常感激。

更新：

這與不透明的繼承問題 - 描述得非常詳細的工作，我周圍使用here

「背景」類#background成爲沒有任何透明度，和一個新的項目是補充說：＃背景透明度與絕對定位和不透明度。

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

來源

2011-10-18 Maxxra

更改順序

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

這應該工作。

來源

2011-10-18 16:51:48 kinduff

'anounce_bar' 是 '內容' DIV中。在'content'div之後放置'background'div似乎只是翻轉了兩個，而沒有將其放在另一個之上。 – Maxxra

使用Priya給你的答案，但將其添加到背景中：'position：absolute;'關閉div：'

'並從內容中移除背景顏色。 http://jsfiddle.net/BN6Ce/4/ – kinduff

這看起來像它的工作，但我想爲我的內容是相對的 - 有一個背景和一個「刊頭」的形象，它需要留。有沒有辦法做到這一點？ – Maxxra

<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

來源

2011-10-18 16:56:50 Priya

解決了將一個放在另一個之上的問題，但現在anounce_bar也是不透明的。 – Maxxra

@Maxxra - 更新鏈接..我知道這是否解決了您的問題http://jsfiddle.net/ BN6Ce/3/ – Priya

'anounce_bar'仍然呈現半透明狀態，而不是純黑色。 – Maxxra

不透明背景上的多個div /類

回答

相關問題