Проблема с макетами Div, имеющими полупрозрачный фон - PullRequest
Новая
       0

Проблема с макетами Div, имеющими полупрозрачный фон

0 голосов
/ 24 мая 2011

У меня есть следующий макет: вложенные DIVs, внешний имеет 100% ширину, а внутренний имеет некоторую фиксированную ширину. Внутренний центрируется с помощью margin:auto.

Теперь мне нужно установить различные фоны для DIV. Скажем, внутренняя часть должна быть красной, а оставшаяся часть внешней части должна быть зеленой. Проблема в том, что фон должен быть полупрозрачным (с использованием PNG или CSS3 rgba()). Таким образом, фон внутреннего DIV не выглядит красным, он становится коричневым! Вот мой код: 

<div id="outer">
    <div id="inner"></div>
</div>

и CSS 

#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}

Я пытался использовать 3 плавающих DIV внутри #outer. Но я не могу установить ширину для других 2-х DIV, чтобы #inner был в центре экрана. width:auto тоже не работает.

Я знаю, что такая раскладка возможна для таблиц; точнее с элементами, которые имеют display:table-cell. Поэтому, когда я добавляю другой «внешний» DIV, я получаю нужный мне результат (3 «уровня» требуются для табличного макета: table , row , cell ). CSS: 

#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}

и ужасный HTML: 

<div id="outer2">
    <div id="outer">
        <div id="left"></div>
        <div id="inner"></div>
        <div id="right"></div>
    </div>
</div>

Есть ли другой способ поставить 3 DIV подряд с таким «балансом»? Или, может быть, существует совершенно другой способ решить исходную проблему? Я имею в виду, проблема появилась только из-за прозрачности! :)

Мне не нравится решение с display:table, потому что я добавил 3 дополнительных DIV ... Также, пожалуйста, не предлагайте никаких решений с использованием JS.

Ответы [ 2 ]

1 голос
/ 24 мая 2011

Если вы чувствуете раздражение и не против потерять горизонтальную полосу прокрутки ...

HTML 

<section></section>

CSS 

body { overflow-x:hidden; }
section {
    width:500px;
    height:50px;
    margin:0 auto;
    position:relative;
    background:rgba(255,0,0,0.5);
}
section:before, section:after {
    top:0;
    bottom:0;
    content:"";
    width:9999px;
    position:absolute;
    background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }

Демо: http://jsfiddle.net/6STug

Hat-tip, CSS-хитрости

0 голосов
/ 24 мая 2011

Почему бы вам не использовать одно фоновое изображение png на #outer? Изображение может содержать полупрозрачный красный, затем полупрозрачный зеленый и снова полупрозрачный красный.

...