más que HTML desarrollo web con estándares

Transparencias en CSS3

Publicado el 10 de febrero de 2010 en: CSS

Con CSS3, disponemos de 2 propiedades para modificar la transparencia de un elemento: opacity y background: rgba

Opacity

Puede tomar valores entre 0 (totalmente transparente) y 1 (totalmente opaco). El valor de esta propiedad se propaga a los hijos del elemento en cuestión.

opacity: 0.5;

Internet Explorer no soporta esta propiedad, pero podemos obtener el mismo resultado con un filtro propietario.

Internet Explorer 8

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Internet Explorer 7 e inferiores, hasta la versión 5

filter: alpha(opacity=50);

Background: rgba

Si queremos que la transparencia no afecte a los hijos del elemento, podemos usar esta propiedad.

background: rgba(103, 215, 164, 0.5);

103, 215 y 164 son el color en modo rgb, mientras que 0.5 es el nivel de transparencia.

Internet Explorer tampoco soporta esta propiedad, pero también existe otro filtro para obtener el mismo resultado:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50f6ab14,endColorstr=#50f6ab14);

Donde 50 es el nivel de transparencia y f6ab14 el color en modo hexadecimal.

En realidad este filtro es para hacer degradados lineales en Internet explorer, pero poniendo el mismo color de inicio y de fin obtenemos el resultado esperado.