Непрозрачность 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 наследован дочерними элементами, заставив текст стать почти нечитабельным. Я предполагаю, что неправильно сказать, что это наследовано, непрозрачность применяется к родительскому отделению, и дети являются частью этого, таким образом пытание переопределить его для дочерних элементов не работает, потому что технически они непрозрачны.

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