Transparencias con CSS

Entre ayer y hoy hemos tenido una discusión en la lista de distribución sobre CSS ovillo que me ha resultado muy productiva para una web que estaba diseñando.

Hasta entonces yo había usado la técnica que encontré en simple-d, se trata simplemente de definir un color de fondo para la capa y luego especificar su opacidad:

-moz-opacity:0.75;
opacity:0.75;
filter:alpha(opacity=′75′);

Sin embargo, con esta técnica he observado que los elementos que están dentro del contenedor al que se le aplique automáticamente adoptan también esa opacidad (texto, fotos…), y además, como decía stripTM en la lista, esto no se verá bien en todos los navegadores pues no pertenece a CSS1 o CSS2, proponiendo como alternativa las transparencias PNG.

PNG es un formato para imágenes que pretende convertirse en estándar para gráficos y sustituir al GIF, y tiene bastantes ventajas, como la que nos interesa, que permite varios niveles de transparencia.

El inconveniente es que el jodío IE (en Windows, según parece) no interpreta las transparencias de PNG y cuando quieres usar una imagen de este tipo para conseguir que el fondo de una zona sea semitransparente, lo que consigues es un cuadro opaco y poco estético.

Hay muchos (WebFX) muchos (A list Apart) muchos hacks y tutoriales para hacer que IE se lo trague (vaya, creo que esa frase me reportará sendas visitas desde Google…).

Para el diseño que estoy construyendo ahora mismo el que mejor me ha venido ha sido el que encontré en daltonlp porque también indica cómo hacerlo para imágenes de fondo especificadas en archivos CSS, y la que dan es una solución muy elegante, porque permite ponerlo todo sin tener que añadir nada al HTML.

Para hacer que el fondo de una capa sea semitransparente creamos una imagen PNG tal y como queramos, en este ejemplo se llama grey.png, y creamos una clase CSS para estos objetos:

.transp {
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=′grey.png′);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.transp [class] {
background-image:url(′grey.png′);
}

Y para usarlo simplemente tendremos que hacer una capa y darle esta clase.

Hay que tener en cuenta varias cosas al usar esta técnica:

• La capa o elemento tiene que tener el atributo «class» para que esto funcione, ya que es el hack que empleamos.
• La anchura del elemento al que lo vamos a aplicar debe estar definida (ya sea en esa misma clase de otra forma)
• La imagen a usar cuanto más pequeña mejor.

Esto último se debe al principal problema de este método, y es que al usarlo, si la imagen de fondo es grande los enlaces contenidos en el elemento no funcionarán.

En el artículo hay una tabla donde se pueden consultar los tamaños de imágenes de fondo que sí van bien, y en los comentarios mismos hay otros hacks para este problema, como añadir en la capa el estilo del cursor del ratón, o poner a los enlaces posición relativa, pero vamos, yo creo que mejor poner una imagen pequeña, nada más que por estilo, porque hacer un fondo semitransparente para que se vea el de la parte de atrás, y luego poner otro fondo encima quizá resulte algo agresivo.

Aunque esta solución me gusta porque no es intrusiva, no usa javascript, ni PHP ni nada raro, pero no es una solución definitiva porque cuando IE se decida a solucionar su problema con PNG habrá que retocar las webs que hayan usado este truco… ahora vosotros veréis si lo usáis.