sinprogramar.blogspot.com

2/12/10

Imágenes PNG con transparencia alpha en Internet Explorer 6

Como algunos ya sabréis, Internet Explorer 6 no renderiza correctamente las transparencias alpha de las imágenes PNG 24. Afortunadamente, el propio Microsoft nos ofrece una solución: un filtro CSS. Los filtros CSS sólo funcionan en Explorer, e incluso varían según la versión, pero en este caso sólo nos interesa el Explorer 6.

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/imagen.png', sizing='scale');
}

Imagen PNG alpha IE 6

Este filtro se puede aplicar en los estilos en linea o en la hoja de estilos, pero cuidado, la ruta a la imágen debe ser absoluta o relativa al documento desde donde se ve la imagen, no relativa a la hoja de estilos como sucede con las imágenes de fondo.

A tener en cuenta
La manera que he conseguido que funcione es aplicandola cómo imagen de fondo en un div y después crear una clase para IE6 que elimine la imagen de fondo y aplique el filtro.

Ejemplo:

div{
background:url(../imagen.png) no-repeat;

width:100px;
height:100px;

}

*html div{

background:none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png', sizing='scale');

}

No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.


Creative Commons License