Opacidade CSS e elementos filho

 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); }  
Lorem
ipsum
dolor

No exemplo acima, a opacidade de div#foo é herdada por elementos filhos, fazendo com que o texto fique quase ilegível. Eu suponho que é errado dizer que é herdada, a opacidade é aplicada ao div pai e os filhos são parte disso, então tentar substituí-lo pelos elementos filho não funciona porque tecnicamente eles são opacos.

Eu normalmente apenas uso uma imagem de fundo alpha png em tais casos, mas hoje eu estou querendo saber se há uma maneira melhor de fazer um plano de fundo de um div semitransparente sem afetar o conteúdo.

Você pode usar o rgba () .

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

Para fazê-lo funcionar em antigos Internet Explorer use CSS PIE . Existem algumas limitações , mas elas são tratadas de maneira compatível com versões anteriores: o valor RGB será renderizado corretamente e a opacidade será ignorada.

A melhor maneira é definir png transparente ao fundo.

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

    Intereting Posts