Несколько Divs / Классы на непрозрачном фоне - PullRequest
Новая
       7

Несколько Divs / Классы на непрозрачном фоне

0 голосов
/ 18 октября 2011

Моя цель (и вопрос с практическими рекомендациями) состоит в том, чтобы иметь непрозрачный / белый фон с черными полями над непрозрачной областью, чтобы служить держателями содержимого. Вот что у меня сейчас: 

/* 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 & content_window) перейти поверх .background?

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

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

Обновление:

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

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

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

Ответы [ 2 ]

0 голосов
/ 18 октября 2011 
<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>

Пример кода

0 голосов
/ 18 октября 2011

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

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

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

...