Непрозрачность CSS и дочерние элементы

Question

<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

В приведенном выше примере непрозрачность div#foo наследуется дочерними элементами, в результате чего текст становится почти нечитаемым. Полагаю, неправильно говорить, что он наследуется, непрозрачность применяется к родительскому div, и дочерние элементы являются его частью, поэтому попытка переопределить его для дочерних элементов не работает, поскольку технически они непрозрачны.

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

Answer 1

Вы можете использовать rgba () .

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

Чтобы это работало в старых Internet Explorer, используйте CSS PIE . Есть некоторые ограничения , но они обрабатываются обратно совместимым способом: значение RGB будет правильно отображено, а прозрачность будет игнорироваться.

Answer 2

Лучший способ - установить прозрачный png для фона.

Answer 3

Если вы используете непрозрачность, вам придется поместить их в отдельные DIV, а затем выстроить их вместе. Фоновый DIV будет иметь меньшую непрозрачность, а передний план DIV будет иметь ваш контент со 100% непрозрачностью.