Opacidade CSS e elementos filhos

Question

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

No exemplo acima, a opacidade de div#foo é herdado por elementos filhos, fazendo com que o texto se torne quase ilegível.Suponho que seja errado dizer que é herdado, a opacidade é aplicada ao div pai e os filhos fazem parte disso, portanto, tentar substituí-la pelos elementos filhos não funciona porque tecnicamente eles são opacos.

Normalmente, eu uso apenas uma imagem de fundo alfa png nesses casos, mas hoje estou me perguntando se existe uma maneira melhor de tornar o plano de fundo de um div semitransparente sem afetar o conteúdo.

Answer 1

Você pode usar rgba ().

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

Para fazer funcionar em antigos exploradores da Internet CSS Pie. Há algumas limitações, mas esses são tratados de maneira compatível com versões anteriores: o valor RGB será renderizado corretamente e a opacidade será ignorada.

Answer 2

A melhor maneira é definir o PNG transparente para o fundo.

Answer 3

Se você usar opacidade, terá que colocá-los em DIVs separados e depois alinhá-los.O DIV de fundo teria a opacidade mais baixa e o DIV de primeiro plano teria seu conteúdo com 100% de opacidade.