martes, 4 de diciembre de 2007

Forzar IE a mostrar transparencia alpha en PNGs

Bastante sabido es de los problemas de IE a la hora de lidiar con la transparencia alpha de los archivos PNG.

Sucede que hasta la versión 6 de IE, el navegador no era capaz de mostrar correctamente la transparencia, mostrando un frustrante fondo de color gris en su lugar.

La solución recae en la utilización del famoso filtro AlphaImageLoader.

Veamos un ejemplo de la declaración de estilos en una CSS de lo que entienden los navegadores como la gente:


#logo_transparente{
background:url('png_transparente.png'); width:150px; height:55px;
}


Si viéramos la página que incluye a la CSS en IE tendríamos el mencionado problema, por lo que la solución es declarar en la stylesheet exclusiva para IE lo siguiente.


/* ESTO ES LA VERSIÓN PARA IE */

#logo_transparente{
background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_transparente', sizingMethod='scale');
}


Listo! De forma sencilla hemos sobreescrito el estilo de nuestra CSS principal para que nuestro querido IE entienda lo que queremos hacer: un PNG transparente!

No hay comentarios: