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

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

Ответы

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