En este artículo vamos a entrar en detalles sobre la opacidad en CSS. Veremos cómo alterar la transparencia de los elementos de la página a través de atributos CSS.

Aunque parezca una contradicción, la opacidad sirve para definir la transparencia de los elementos de la página. Esto es porque todos los elementos de una página son 100% opacos por defecto. Es decir, no se puede ver a través de ellos y por tanto al sobreponerse tapan totalmente lo que haya debajo. Así pues, a través de la opacidad podremos especificar cuanto de opaco será un elemento, o lo que es lo mismo, cuan transparente sea.

La opacidad se trabaja de dos maneras distintas en los navegadores más comunes. Por un lado tenemos a Internet Explorer, y por otro lado a todos los demás navegadores, es decir, Firefox, Opera o Chrome. Por ello, para especificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. En DesarrolloWeb.com ya habíamos tratado este tema con anterioridad, pero ahora vamos a ofrecer explicaciones más completas.

Opacidad en Internet Explorer

En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Dichos filtros se pueden aplicar con el atributo filter de hojas de estilos. Existen varios filtros disponibles para hacer distintos efectos sobre elementos de la página, en concreto el filtro opacity es el que nos interesa para definir transparencias. Se especifica de la siguiente manera:

.claseopacidad{
   filter:alpha(opacity=25);
}

Con esta declaración de estilos conseguiríamos que los elementos de la clase claseopacidad tuvieran un 25% de opaco, o lo que es lo mismo, un 75% de transparente.

Ahora bien, en Explorer no sé por qué, podemos encontrar un problema al utilizar el filtro opacity. Simplemente en algunos casos no funcionará y no veremos la transparencia que hayamos declarado. Esto se soluciona aplicando algún estilo adicional, aparte del propio filtro CSS. Por ejemplo, ponerle un ancho a la capa bastaría, o también colocarle un float:letf. Es importante saber esto, puesto que es el típico bug que si no lo sabes puedes acabar con un dolor de cabeza antes de dar con él.

Quedaría por ejemplo así:

.claseopacidad {
   filter:alpha(opacity=25);
   width: 120px;
}

Opacidad en Firefox, Opera, Chrome...

En estos navegadores se define la transparencia de una manera más simple. Lo haremos a través del atributo opacity, de esta manera:

. claseopacidad {opacity: .5}

Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como prefiramos decir.

-moz-opacity: .25

Con esto indicamos una transparencia del 75%. Este atributo hoy no hace falta utilizarlo, pero si lo ponemos no es mala idea para aumentar la compatibilidad de la página con versiones anteriores del navegador.

Transparencia para todos los navegadores

Finalizamos este artículo de desarrollo web .com, poniendo todos los conocimientos adquiridos a la vez. Para declarar un estilo de transparencia que sirva para todos los navegadores simplemente tenemos que poner las distintas declaraciones de estilos todas juntas. Cada browser interpretará la que conoce.

.transparencia {
   opacity: .25;
   -moz-opacity: .25;
   filter:alpha(opacity=25);
   float: left;
}

Podemos ver un ejemplo sobre cómo quedaría la opacidad declarada en una página aparte.