<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 полупрозрачным, не затрагивая его содержимое.