<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>

En el ejemplo anterior, la opacidad dediv#foo es heredado por elementos secundarios, lo que hace que el texto se vuelva casi ilegible. Supongo que es incorrecto decir que se hereda, la opacidad se aplica al div principal y los hijos son parte de eso, por lo que intentar anularlo para los elementos secundarios no funciona porque técnicamente son opacos.

Por lo general, solo uso una imagen de fondo alfa png en tales casos, pero hoy me pregunto si hay una mejor manera de hacer un fondo de un div semitransparente sin afectar el contenido.