ExeBlog, desarrollo de videojuegos y más

Blog de Exelweiss dedicado al desarrollo de videojuegos, industria del videojuego, advergaming, juegos online, etc

Solución sencilla para utilizar PNG con transparencias en Internet Explorer 6

26 octubre 2007

Icono PNG

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:

  1. Descarga este fichero HTC y este GIF en tu directorio CSS
  2. Añade este código en tus CSS para utilizar PNG’s con transparencia (¡ojo!, no valida)
    IMG { behavior: url(iepngfix.htc); }
  3. ¡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 width y height o crear un contenedor tipo DIV con el tamaño apropiado. También es posible editar el fichero HTC y cambiar la propiedad SCALE por CROP para evitar esto.
  • No se puede utilizar padding o border
  • Más detalles

Véase también

Hay 28 comentarios.

  • 22:11, 28 octubre 2007

    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!

  • 2. Ariel
    19:12, 7 noviembre 2007

    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

  • 20:00, 7 noviembre 2007

    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”.

  • 4. Ariel
    17:14, 8 noviembre 2007

    Sale ya quedo listo, s me funciono poniendo la ruta absoluta.

    muchas gracias !!( ‘o’ ,)!!

  • 5. Ariel
    17:44, 8 noviembre 2007

    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

  • 19:37, 8 noviembre 2007

    @Ariel, sin el código es bastante complicado saber de que se trata. :-S

  • 22:38, 10 noviembre 2007

    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

  • 8. Ariel
    00:19, 13 noviembre 2007

    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

  • 9. Ariel
    00:22, 13 noviembre 2007

    La ruta del htc la estoy poniendo absoluta

    Saludos y gracias

  • 12:06, 13 noviembre 2007

    @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

  • 12:52, 14 abril 2008

    Me funciona correctamente en localhost, pero al subirlo al servidor me hace sombras en el png. No me carga el filtro.

  • 19:50, 15 abril 2008

    Prueba a poner la ruta absoluta. Por ejemplo:
    behavior:url(/css/iepngfix.htc)

  • 14:22, 28 abril 2008

    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

  • 14. Carlos
    18:32, 4 junio 2008

    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.

  • 15. Santiago
    23:53, 11 julio 2008

    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?

  • 16. Pass
    19:07, 17 julio 2008

    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??? :’(

  • 23:12, 17 julio 2008

    No sabría decirte. Prueba con la nueva versión de IEPNGFIX

  • 22:25, 24 julio 2008

    Hola :-) he utilizado tu herramienta y funciona de primera :-) .

    Gracias

  • 19. crazywork
    21:14, 30 julio 2008

    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 :-)

  • 20. Facundo
    20:15, 8 abril 2009

    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

  • 05:30, 27 abril 2009

    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

  • 22. francis valenzuela
    21:25, 23 septiembre 2009

    esta estupendo pero no lo valida w3c

  • 08:38, 29 septiembre 2009

    @francis valenzuela
    Es lo que pasa con las soluciones propietarias….

  • 24. rubens
    15:27, 4 noviembre 2009

    funciona a las mil maravillas gracias esta en todas

  • 18:58, 20 noviembre 2009

    Era lo que andaba buscando por varias horas, quedo muy bien, gracias!!

  • 26. Claudio
    19:47, 12 mayo 2010

    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

  • 27. Claudio
    19:48, 12 mayo 2010

    lo que esta dentro del

    src=”" del IMG es una funcion del ASP, aclaro para no generar alguna confucion

  • 28. Luis
    04:01, 16 septiembre 2011

    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


  • icono rss RSS