Несколько 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>

Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?

Примечание. У меня есть другой контент, в том числе верхнее изображение «шапка» и фоновый JPG, который, возможно, мешает этому.

Любая помощь будет очень признательна.

Обновление:

Это была проблема с наследованием непрозрачности - работа, которую я использовал, очень хорошо описана здесь

Класс 'background' стал #background без какой-либо непрозрачности, и был добавлен новый элемент: #background .transparency с абсолютным позиционированием и непрозрачностью.

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

html css opacity
person Maxxra    schedule 18.10.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Изменить порядок

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

Это должно сработать.

person kinduff    schedule 18.10.2011
comment
'anounce_bar' находится внутри div 'content'. Размещение div "background" после div "content" просто переворачивает их, не помещая один поверх другого. - person Maxxra; 18.10.2011
comment
Используйте ответ, который вам дала Прия, но добавьте его на задний план: 'position: absolute;' закройте div: '‹div class = background› ‹/div›' и удалите цвет фона из содержимого. jsfiddle.net/BN6Ce/4 - person kinduff; 18.10.2011
comment
Похоже, что это сработало, но я бы хотел, чтобы мой контент был относительным - есть фон и изображение «мачта», которые нужно использовать. Есть ли способ добиться этого? - person Maxxra; 19.10.2011
comment
Разместите код в jsfiddle ваших изображений и контента, я вам помогу (+1) - person kinduff; 19.10.2011
comment
Я заставил это работать, выполнив обходной путь, описанный здесь: stevenyork.com/tutorial/, спасибо за ваша помощь! - person Maxxra; 19.10.2011

arrow_upward
0
arrow_downward 

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

Образец кода

person Priya    schedule 18.10.2011
comment
Это решило проблему размещения одного поверх другого, но теперь панель anounce_bar также непрозрачна. - person Maxxra; 18.10.2011
comment
@Maxxra - Обновите ссылку ... дайте мне знать, решит ли это вашу проблему jsfiddle.net/BN6Ce/3 < / а> - person Priya; 18.10.2011
comment
anounce_bar по-прежнему отображается полупрозрачным, а не сплошным черным. - person Maxxra; 18.10.2011