css - pero - rgba

Opacidad 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, lo que hace que el texto sea casi ilegible. Supongo que está mal decir que se hereda, la opacidad se aplica al div padre y los hijos son parte de eso, por lo que intentar anularlo para los elementos hijos no funciona porque técnicamente son opacos.

Por lo general, solo uso una imagen de fondo alfa png en estos casos, pero hoy me pregunto si hay una mejor manera de hacer un fondo de una división semitransparente sin afectar el contenido.

Answer 1

La mejor manera es establecer png transparente al fondo.

Answer 2

Puedes usar rgba() .

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

Para que funcione en antiguos Internet Explorer, use CSS PIE . Existen algunas limitaciones , pero éstas se manejan de una manera compatible con versiones anteriores: el valor RGB se procesará correctamente y la opacidad se ignorará.

Answer 3

Si usa la opacidad, tendría que colocarlos en DIV separados y luego alinearlos. El DIV de fondo tendría la menor opacidad, y el DIV en primer plano tendría su contenido con un 100% de opacidad.