Opacidad de CSS y elementos secundarios

 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

En el ejemplo anterior, la opacidad de div#foo es heredada por elementos secundarios, lo que hace 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 utilizo una imagen de fondo alpha png en tales casos, pero hoy me pregunto si existe una mejor manera de hacer que el fondo de un div se vuelva semitransparente sin afectar los contenidos.

Puede usar rgba () .

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

Para que funcione en viejos exploradores de Internet, utiliza CSS PIE . Existen algunas limitaciones , pero se manejan de manera compatible con versiones anteriores: el valor RGB se renderizará correctamente y se ignorará la opacidad.

La mejor manera es establecer png transparente para el fondo ..

Si usa opacidad, debería 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.

    Intereting Posts