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).
Posible 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
Véase también
- PNG de 8 bits con canal alfa (la alternativa a IE6)
- Por qué según Yahoo no se debe usar AlphaImageLoader: Image Optimization, Part 5: AlphaImageLoader
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
Pues lo he probado y me anula otros javascript incrustados en la página y unos a: hover en CSS. Por lo demás, funciona perfecto, pero no es mi solución por eso.
Hola, logre hacerlo funcionar pero tengo el siguiente problema:
Tengo un DIV con id header que el fondo usa el hack para la transparencia, funciona perfecto, pero ete aqui que dentro del DIV#header tengo un DIV imagen que contiene una imagen con un MAPA de imagen… bueno resulta que al aplicar el hack sobre el header se aplica tambien al div#imagen y hace que la imagen que este div contiene no pueda tener MAP… jaja suena un poco complicado, cualquier cosa les explico en detalle.
Alguna idea?
hola
sabes llevo dias y dias viendo el problema de png transparentes y probé tu metodo de parchar los png y me funciona perfectamente pero aplicandolo solo a imagenes png insertas en celdas de tablas.
Pero si quiero que un fondo me quede transparente no lo logro =(
para una imagen comun coloco:
y me queda a la perfeccion (transparencia total)
pero trato de aplicar lo mismo para un fondo de celda (en la cual hay enlaces incluidos en la celda) de esta forma:
y no toma la transparencia =/
y no quiero dejarlo en una hoja de estilo aparte =S
en que estare fallando??? :’(
No sabría decirte. Prueba con la nueva versión de IEPNGFIX
Hola
he utilizado tu herramienta y funciona de primera 
.
Gracias
me parece muy interesante esta solución para el problema de los png y IE6 ..pero tengo la duda de como utilizarlo con joomla, tengo este problema y aún soy novata en el trabajo con los css…
Tengo un artículo que aparecerá en la página inicial pero las imagenes que tiene son png..ya saben en firefox todo bien pero en IE6 sale mal.
Me podrían ayudar por favor?
Gracias desde ya
Buenass, aplique el hack sin ningun problema. Salvo cuando tengo que repetir la imagen como en este caso.
#fondo_med{
width:750px;
height:834px;
background-image:url(img/fondo_cuerpo_med.png);
background-repeat:repeat-x;
float:left;
behavior:url(img/iepngfix.htc);
}
simplemente no me toma en cuenta el repeat-x
gracias de antemano!
Saludoss
Hola me gusto lo probe incluso pude usar pading margenes en una web pero al momento de colcoarlo en un blog el fichero no resulta, como podría darle solusión a este problema
esta estupendo pero no lo valida w3c
@francis valenzuela
Es lo que pasa con las soluciones propietarias….
funciona a las mil maravillas gracias esta en todas
Era lo que andaba buscando por varias horas, quedo muy bien, gracias!!
Hola buenas tardes, tengo un problema al intentar hacer la transparencia con un PNG, me harian un gran favor en ayudarme, muchas gracias…
css
img
{
behavior: url(iepngfix.htc);
}
asp
<img src=”" />
aclaracion:
—————
el pedazo de codigo “”
es una funcion del ASP, aclaro por las dudas que genere alguna confucion.
Desde ya muchas gracias
lo que esta dentro del
src=”" del IMG es una funcion del ASP, aclaro para no generar alguna confucion
Hola, habra una posibilidad de colocar esto en Blogger, si la hay, me diria cómo, que lo he intentado y no he podido hasta ahora