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!

Alpha, transparencia crossbrowser? Es posible en forma sencilla?

La respuesta es si!

Y por cierto es sencillo, simplemente bastará con crear la clase css a la cual queremos darle la "capacidad" de verse transparente o translúcida, y escribir esto:

.transparent{
opacity: 0.7;
/* Esto lo entiende nuestro "amigo" Internet Explorer */
filter: Alpha(opacity=70);
}

En este caso suponemos que queremos crear una transparencia del 70%.

La primera línea será "comprendida" por Firefox, ópera, etc., mientras que la segunda solamente Internet Explorer. De esta sencilla forma logramos compatibilidad con ambos mundos (firefox/internet explorer) sin mayores dolores de cabeza.