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

Im obigen Beispiel ist die Deckkraft vondiv#foo wird von untergeordneten Elementen geerbt, wodurch der Text nahezu unlesbar wird. Ich nehme an, es ist falsch zu sagen, dass es vererbt wird, die Deckkraft auf das übergeordnete div angewendet wird und die untergeordneten Elemente Teil davon sind. Daher funktioniert der Versuch, es für die untergeordneten Elemente zu überschreiben, nicht, da sie technisch undurchsichtig sind.

In solchen Fällen verwende ich normalerweise nur ein Alpha-PNG-Hintergrundbild, aber heute frage ich mich, ob es eine bessere Möglichkeit gibt, den Hintergrund eines Divs halbtransparent zu gestalten, ohne den Inhalt zu beeinflussen.