Solución sencilla para utilizar PNG con transparencias en Internet Explorer 6
Para utilizar un PNG de 32 bits con transparencias en Internet Explorer 6 (y 5.5) no habÃa más solución que echar mano del poco agraciado filtro Directx AlphaImageLoader (código propietario Microsoft).
1. La solución: iepngfix.htc
Por suerte Angus Turnbul creó un atajo que nos facilita mucho la vida a los diseñadores web:
- Descarga este fichero HTC y este GIF en tu directorio CSS
- Añade este código en tus CSS para utilizar PNG’s con transparencia (¡ojo!, no valida)
IMG { behavior: url(iepngfix.htc); } - ¡Listo!
El fichero HTC (referencia en Microsoft) es un componente HTML con un script que puede ser leÃdo por Internet Explorer y que trata el PNG con transparencias para aplicarles el filtro. Funciona tanto para imágenes dentro de la etiqueta IMG o en los BACKGROUND de CSS
Ejemplos
Por ejemplo, si tenemos definido el siguiente fondo:
DIV#base { background: url(imagen-con-alfa.png); }
AñadirÃamos la siguiente lÃnea en nuestro CSS:
IMG, DIV#base { behavior: url(iepngfix.htc); }
Aunque aconsejo utilizarlo sólo en los fondos o imágenes que lo necesiten. Podemos utilizar, por ejemplo, la siguiente clase:
IMG.transparencia { behavior: url(iepngfix.htc); }
Las pegas
- Los fondos en PNG no se pueden repetir, es decir, no se pueden usar como tiles.
- Hay que definir los tamaños de las imagenes con
widthyheighto crear un contenedor tipoDIVcon el tamaño apropiado. También es posible editar el fichero HTC y cambiar la propiedadSCALEporCROPpara evitar esto. - No se puede utilizar
paddingoborder - Más detalles
2. Otra alternativa para Internet Explorer 6
Por casualidad encontré una alternativa para IE6 que podrÃa ser útil en ciertos casos y con la que tendrÃamos transparencias reales en los navegadores modernos, y transparencia binaria en IE6.
Se trata de utilizar un formato especial de PNG, en el que tendrÃamos una imagen indexada de 8 bits con un valor alfa especifico por cada uno de los colores de la paleta (Más información en la especificación PNG).
Imagen de 32 bits optimizada con PNGOUT (3,36 KB)
Imagen de 8 bits con canal alfa optimizada con PNGOUT (2,42 KB).
Los navegadores modernos muestran correctamente este formato, pero IE6 no aplica bien el alfa y elimina todas la zonas semitransparentes, dejando sólo las zonas opacas. Esta opción puede ser válida para pequeños iconos o similares.
Ejemplo de como quedarÃa en IE6
Para utilizar esta triquiñuela, sólo tenemos que reducir el número de colores de la imagen y del canal alfa, y después optimizarla con PNGOUT. Ojo, Photoshop no carga bien este tipo de imágenes.
Hay 13 comentarios.
Escribe un comentario:
Nos gusta conocer tu opinión. Por favor, escribe comentarios relacionados con el tema. Los comentarios fuera de tema, con insultos o spam serán borrados sin concesiones.
Realmente interesante… no se por que la lucha de IE con los PNGs y con Flash en algunos casos… las soluciones, sobre todo la primera, te puede sacar de un apuro… por que la gente no deja el IE y se pasa al Firefox, Opera, etc… :/
un saludo!
Hola una preg. ya puse en mi carpeta css el archivo hct y el gif y le pongo en mi estilo lo siguiente
.ayuda
{
behavior: url(iepngfix.htc);
background-image:url(/qaimages/iconoayuda.png);
background-repeat:no-repeat;
width:20;
height:20;
}
y me pone la imagen con una sombra gris en la ransparencia
¿Cómo podrÃa resolver mi problema?
Gracias y saludos
Supongo que lo de la sombra gris te refieres a que el fondo de la imagen sale en gris.
Eso es que no está aplicando el filtro. Prueba a poner la ruta absoluta del fichero HTC. Por ejemplo:
behavior:url(/css/iepngfix.htc);
y por si acaso, ponlo después del “background”.
Sale ya quedo listo, s me funciono poniendo la ruta absoluta.
muchas gracias !!( ‘o’ ,)!!
Hola de nuevo, ya se me habÃa corregido mi problema pero ahora lo que pasaes que me pone la imagen y encima de ella pone un cuadro como rojo, y le pone como un borde, como podre corregir esto porque ya le intente varias cosas y nada
Graicas y saludos
@Ariel, sin el código es bastante complicado saber de que se trata. :-S
Saludos,
Llegue a esta pagina viendo en el codigo de otra..
http://www.emerils.com/holidaytogo/index
Y solo para comentar que en esa pagina si valida el metodo que proponen aqui. Tal ves seria bueno ver el metodo que utilizan, y actualizar el post.
Sergio
Hola de nuevo, espero que hayan tenido un buen fin de semana, aqui escribo el código, para ver si me pueden hechar la mano.
Hoja de estilos:
img
{
behavior behavior: url(iepngfix.htc);
}
Html
Lo intente de las dos formas:
1.
2.
y les comento que el problema es que me pone la imagen pero encima de ella pone un cuadro como rojo y además le pone borde a la imagen,
epero me puedan ayudar
Saludos y gracias
La ruta del htc la estoy poniendo absoluta
Saludos y gracias
@Ariel. Para eliminar el borde la imagen prueba con
IMG {border:none}
O si tiene un enlace:
A IMG {border:none}
@Sergio E Robles. El XHTML de la página que comentas sà que valida, pero el CSS no, ya que la propiedad “behavior” es propietaria
Validador CSS
Me funciona correctamente en localhost, pero al subirlo al servidor me hace sombras en el png. No me carga el filtro.
Prueba a poner la ruta absoluta. Por ejemplo:
behavior:url(/css/iepngfix.htc)
Lo conseguÃ, el problema vino a raiz de no cargar el archivo blank.gif y de cargar la imagen png como background del css. De la manera que lo he probado ahora funciona 100%.
Podeis ver una demo en http://www.clikam.com/png/index.html.
Gracias a todos