Css3: Transparencias

Css ha incorporado unas funciones de color, rgb y hls, con versiones que incluyen canal alpha o de transparencia. Quien trabaje con hls ya conoce como funciona, y a los demás con rbg tenemos suficiente. Así que me voy a centrar en la función rgba. Su sintaxis es:
rgba (rojo, verde, azul, transparencia)
Donde rojo, verde y azul son valores entre 0 y 255, siendo el 0 el más oscuro y el 255 el más claro (equivalente a 0 y F respectivamente en notación HTML). Y el valor de transparencia es un valor con decimales entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco.
Así podemos hacer que el fondo de un div sea amarillo semi-transparente con el siguiente código:
#miDiv{
     background-color: rgba(255,255,0,0.5);
}

.fondo{
background: url(//1.bp.blogspot.com/-KtZt_Io8zpA/TwLnToSxDuI/AAAAAAAAAAs/SoG4abyFigQ/s1600/logo-vertical-morado-soluciones.png) repeat;
width: 100%
min-height: 200px;
}
#miDiv{
background-color: rgba(255,255,0,0.5);
text-align: center;
}

Div amarillo semitransparente
Como vemos el amarillo deja ver el dibujo del div de fondo que se ha colocado con el logo de Tictac. Estas funciones de color están soportadas por casi todos los navegadores, Firefox, Chrome, Safari, Android, Opera,… desde hace muchas muchas versiones, y en Internet Explorer desde la 9. Así que la única preocupación seria es Internet Explorer 8 y anteriores.
Se puede re-declarar la propiedad, dando primero una versión para los navegadores que no conozcan la función rbga y que los navegadores que si la conozcan la sobrescriban con la segunda declaración. Así podemos hacer una versión para navegadores viejos con una imagen (usando background en lugar de background-color) o con un color sólido. Yo recomiendo esto último, un color sólido que sea parecido a como queda el color con la transparencia en otro navegador y ya está. Quien tenga un navegador viejo lo verá un poco más feo, pero no solo es aceptable, sino casi recomendable, ¡si quieren ver las cosas bonitas que se actualicen!
El código con re-definición de la propiedad sería:
#miDiv{
    background-color: #ffff00;
    background-color: rgba(255,255,0,0.5);
}

#miDivIE{
background-color: #ffff00;
text-align: center;
}

#miDivCompleto{
background-color: #ffff00;
background-color: rgba(255,255,0,0.5);
text-align: center;
}

En IE 8 se vería así, con color sólido
Este div se ve sólido en IE 8 y transparente en otros navegadores
2018-07-02T17:38:23+00:0009/05/2012|Diseño web, HTML5|

3 Comments

  1. | Loope | 23/10/2012 en 15:49 - Responder

    Exceleeeente hermano! tremendamente simple y claro. No lo podrías haber explicado mejor!

    Gracias!!

  2. | Loope | 23/10/2012 en 15:50 - Responder

    (y de paso, revisá el tema de los capchas, estuve 7 min probando hasta que adiviné!)

  3. Luis Hijarrubia 24/10/2012 en 12:22 - Responder

    Muchas gracias!. El sistema de captchas es el que ofrece google para los blogs y no permite cambiarlo. Así que o dejamos comentar sin captcha y se nos llena el blog de spam, o tiene que ser así.

Deje su comentario