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,子div是其中的一部分,所以试图为子元素重写它是不可行的,因为从技术上讲它们是不透明的。

在这种情况下,我通常只使用alpha-png背景图像,但今天我想知道是否有更好的方法使div的背景半透明而不影响内容。