PNG’s transparentes en IE6

14/ago/2006 77

Es indiscutible las bondades que ha traído la inclusión de Unisys del formato PNG. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sí en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo.

La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o filtros de IE, pero ninguno funciona correctamente sobre CSS.

Sigue el estilo utilizado:

#imagen {
width: 400px;
height: 219px;
background-image: url(“pildora.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’);
}

Explico: el ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no. Además aún así el código XHTML valida según W3C, no el CSS ya que filter es de Microsoft y no de W3C (corregido).

La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacío (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacío (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s.

Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raíz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta).

Ver resultado

Suerte y a disfrutar del buen diseño con los PNG transparentes.

PD: gracias por sus comentarios para hacerme ver el error de validación del CSS.

Comentarios

  1. Darwin Vivallo [#]

    ¡ Me resulto ! , pero tengo que dar la dirección completa de la foto (http://www.elsitio.com/galeria/foto.png). Eso

  2. ismael [#]

    si funciona pero al momento de poner enlaces dentro del div ya no funciona los enlaces… alguien tiene la solucion!!!! ??

  3. Victor Humanes [#]

    Hola a tod@s!

    A mi me funciona correctamente, pero hay un detalle que no consigo. Tengo una imagen png de fondo de un DIV. Esta imagen es más pequeña que el ancho del DIV entonces quiero que no se repita y que se centre. Eso lo consigo en la etiqueta background para Firefox, ¿pero donde le indico esos atributos para IE?

    Gracias!!

  4. Jorge Epuñan [#]

    Victor Humanes, no te sirve background-position: center center? o lo q es lo mismo background-position:: 50% 50%

  5. Fernando [#]

    Hola que tal un saludo,yo eh estadoi trabajando con los png, tengo un problema con los link que aun no se como solucionar, miren tengo un div contedor con un fondo png semi-tranparente que ocupa casi toda la pagina, el problema que tengo es que dentro de ese contenedor tengo unos links que en ie6 no funcionan, ya me canse de buscar y no encuentro una solucion, saben de alguna????”’

  6. dani [#]

    ¿y qué sucede si la imagen es una “list-style-image”?

  7. Jorge Epuñan [#]

    Fernando: postea algun link en los foros para ver q esta pasando.. asi como explicas me cuesta imaginarlo. dani: solo con background-image….. saludos.

  8. Egomanus [#]

    Gracias, ya encontre el problema, consiste el colocar una imagen .gif transparente al frente (trasparente.gif) y luego la que queremos que se vea (imagen.png), asi fue que me funcionó, de resto siempre me mostraba la imagen sin trasparencia o me dejaban de funcionar los inputs y links,
    hay que colocar las medidas de la imagen a mostrar porque si no se colocan tomará las medidas de la imagen transparente,

  9. Egomanus [#]

    <img src=”trasparente.gif” width=”100″ height=”100″ style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen.png’, sizingMethod=’scale’);” alt=””>

  10. CSSLab » Definitivo: PNG’s transparentes en IE6 [#]

    […] tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi anterior artículo sobre este mismo tema, la solución es real pero su implementación se torna complicada […]

  11. Javier Rodriguez [#]

    saludos recientemente me he encontrado con el problema y si se puede arreglar. En mi caso especifico me queda una duda, tengo que hace unos boletines y de cara al diseño necesitaria poder meterlo todo dentro de la etiqueta de mi html, osea por requerimientos de una aplicacion solo puedo rellenar el body de mi Html. Me gustaria saber si desde el codigo html puedo meter ese CSS como valor del atributo “style”. Un añadido es que tampoco puedo usar java script.

    Gracias por adelantado, de todas formas ya me habeis salvado la vida.

  12. Fran [#]

    Cojonudo tío. Me salvaste la vida.

    Funciona de la óstia!!! Gracias!!!!

  13. Javier Enrique León [#]

    Me parece genial la verdad que el tema de los PNG y las deficiencias de IE molestgan a todos el vernos obligados a usar un PNGFIX por el IE 6 y lineas de código para los fondos cuando la solución simplemente sería erradicar el IE6 y de pasadita si se pede todos las demás versiones.

  14. Josef [#]

    No me funciona!, aunque debo decir que lo estoy viendo en IE 6 corriendo bajo Darwine en Mac OS. Sólo se ve toda la página en rojo. Me molesta este tema de los png’s para IE porque ni siquiera tengo las herramientas para corregirlas. Maldición, ayuda!!

  15. Jorge Epuñan [#]

    Josef: lamentblemente tendras q probarlo en un PC con Win y IE6 ya q con Wine no podras verlo funcionando; tb tengo lo mismo y no es posible.

    Saludos.

  16. Tomás Girardi [#]

    Para quienes les desaparece el resto del contenido del div, como a Rafael. Intenten con sizingMethod=’crop':
    ej: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’estilo/pics/ayuda_mini.png’,sizingMethod=’crop’);

    A mi me funcionó así en IE6

    Para los que no les funciona de frentón: Si están haciendo copy/paste, asegurense de que no hayan ‘ ` ‘ en el código. Las comillas dentro de la url mejor no ponerlas y las que van desntro de la invocación al filtro deben ser ‘ ‘ ‘ .

    Saludos

  17. vB3.8 hack para Png transparentes con IE6 existe?? [#]

    […] add-on para hacer eso que mencionas. Puedes leer art

  18. modeff [#]

    Hola a todos!!! he probado el enlace de “ver resultado” para probar el efecto del script de arriba y en todo funciona perfecto pero al ponerlo en el IEtester en IE6 solo veo el fondo ¿es que cambió algo en IE6?? en mi código me pasa exactamente lo mismo, se ve únicamente el fondo. }
    El código es el mismno que el de arriba, cuide de cambiar la ruta para el filtro y que sea desde la raiz y se nota que me coge el filtro porque desaparecen, antes me los mostraba grises (son unos degradados grices trasparentes). Probé con PNG 8, PNG 24 (que me salían negros) y con PNG 32 y nada.
    Muchas gracias y saludos

  19. Jorge Epuñan [#]

    modeff: con ningun IETester podras visualizarlo, ya q solo emulan el comportamiento del motor de IE6 y no su totalidad; deberas probarlo en una instalacion de este browser.

    Suerte!

  20. modeff [#]

    Muchas gracias por el dato Jorge, efectivamente lo probe en otro computador y funciona. Si no tuviera W. Vista podría usar el Multipler :( buscare una web para visualizar mi web con IE6
    Saludos

  21. Castaneda [#]

    probe su propuesta pero no se ve la imagen PNG con fondo transparente que utilizo, la estoy usando en el header, y pruebo si funciona con IETester, mi pregunta es si puedo confiar en ese programa?

    Gracias!

  22. Jorge Epuñan [#]

    Castaneda: tal como le mencionaba a modeff (leer comment anterior), las transparencias PNG para IE deben ser probados en este browser y no en emuladores.

    Salu2.

  23. Castaneda [#]

    😀 Hola Jorge!

    Gracias por tu respuesta!!

    Ya se ve la transparencia probando con IEtester, el problema eran las comillas de el enlace al quitar las comillas funciona , mi pregunta es si eso esta bien a la hora de usar IE6 browser, con IEtester ya se ve la transparencia que uso en el header….

    Tambien necesito usarlo para una imagen que se repite (“y” veces) y no me funciono, no se ve el fondo en el IEtester, simplemente no aparece, mi pregunta es lo estoy haciendo mal, o no funciona para imagenes que se repiten.

    Esta es la sintaxis que estoy usando :

    center{
    background-image: url(Imagen.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=Imagen.png);
    background-repeat: repeat-y;
    background-position: top center;
    }

    Que me sugieren?

    Pd. Estoy usando los enlaces “sin comillas” , pues en el Header me funciono probandolo en IEtester.

    Mil Gracias y buen dia!

  24. Castaneda [#]

    Hola

    Encontre por ahi en un foro esta misma solucion per con unas lineas extras:

    #image {
    background:url(images/image.png)!important;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’image’, src=’images/image.png’);
    }
    Las lineas extras son:

    sizingMethod=’image’,

    Esto es correcto?

    Mil Gracias!

  25. Marta [#]

    Lo acabo de probar y funciona! Muchísimas gracias

  26. Mac [#]

    jejeje no funciona, tienen una alternativa para q funcione para todas las imagenes de la pagina!!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab