Opacidad de CSS y elementos secundarios

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> 

En el ejemplo anterior, la opacidad de div#foo es heredada por elementos secundarios, haciendo que el texto sea casi ilegible. Supongo que es incorrecto decir que es heredado, 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.

Normalmente uso una imagen de fondo alpha png en tales casos, pero hoy me pregunto si hay una mejor manera de hacer que un fondo de un div se vuelva semitransparente sin afectar el contenido.

Answer 1

Puede usar rgba().

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

para que funcione en los antiguos exploradores de Internet utilizar CSS PIE. Hay some limitations, pero se manejan de una manera compatible hacia atrás: el valor RGB se renderizará correctamente y la opacidad se ignorará.

Answer 2

Si utiliza la opacidad, tendría que ponerlos en DIV por separado y luego alinearlos juntos. La DIV de fondo tendría la opacidad más baja, y la DIV de primer plano tendría su contenido con 100% de opacidad.

Answer 3

La mejor manera es la creación png transparente a fondo ..