Как получить прозрачный <div>с непрозрачным <div>наложением?

Question

У меня есть простой на моей странице с непрозрачностью 0,5. Проблема в том, что текст внутри тоже прозрачный. Как мне это исправить? Я делаю еще один div и помещаю его поверх прозрачного? Если да, то как это сделать?

Вот код, который у меня есть. Div "header" - это позиция: относительная. Другие являются абсолютными. Непрозрачность не отображается в IE.

<div id="header">
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
            <div class="transparent" style="background-color:Black; z-index: 0; opacity:0.5; position:absolute;"></div>
            <div class="overlay" style="z-index: 1; position:absolute;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
            <div id="footer">
            </div>
        </div>

Answer 1

Единственный способ добиться такого расположения - использовать два разных элемента div, где второй не является дочерним по отношению к прозрачному.

<div id="container">
 <div class="transparent">
 </div>
 <div class="overlay">
 </div>
</div>

Вы можете установить для свойства z-index оверлея div более высокое значение, чем у прозрачного div, чтобы поместить его «сверху».

Последний шаг - расположить ваши два относительно контейнера. Использование «position :lative» на контейнере и «position: absolute» на дочерних элементах позволит достичь такой цели.

Answer 2

Все, что находится внутри прозрачного контейнера, «унаследует» непрозрачность, в том смысле, что непрозрачность умножится.

Если вам нужен прозрачный div с непрозрачным текстом, одним из вариантов является использование полупрозрачного фонового изображения вместо использования непрозрачности css. Другая возможность ... только что опубликованный спонсор. У текста с текстом вообще не должно быть фона.

Answer 3

Не вкладывайте DIV, а располагайте один над другим.