Ya hemos hablado por aquí de algunas soluciones para que el Internet Explorer 6 trabaje adecuadamente con los PNG, no obstante, se trata de soluciones que requieren «bastante trabajo» por nuestra parte.
Via dzone descubro que Angus Turnbull hace tiempo que había dado con una solución mucho más sencilla y rápida: IE PNG Fix
Nos descargamos el archivo iepngfix.zip y subimos a nuestro servidor los archivos iepng.htc (el script en si mismo) y blank.gif (una imagen gif transparente). Editamos el archivo iepng.htc, si es necesario, para que sepa donde está situado el gif transparente e introducimos algo como la siguiente línea en nuestro css:
Simplemente con eso, ya está. Además soporta las imágenes utilizadas como fondo, simplemente añade la propiedad a cualquier elemento que tenga establecido un fondo en PNG de la forma habitual.
En el archivo que nos descargamos viene incluida una demostración con una explicación bastante clara del funcionamiento del script. Sin duda simple y muy cómodo. ¡Se acabaron los GIFS de mala muerte!
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] Como ya vimos con el caso de los png, existen unos archivos llamados behaviors (comportamientos) que nos permiten proveer de estas funcionalidades a Internet Explorer. [...]
Hack de IE para transparencia de PNGs…
Dos sitios que cubren el tema del manejo de PNGs con transparencia en Internet Explorer 6. Este asunto nos ha causado seguramente a todos una molestia en algún projecto, pero hay soluciones.
Esperemos nomás a que pronto termine de desapa…
[...] este blog ya hemos comentado algunos métodos para conseguir que funcionen correctamente los PNG con transparencia pero ninguno es del todo fiable, con algunos no funcionan bien cosas tan simples [...]
[...] este blog ya hemos comentado algunos métodos para conseguir que funcionen correctamente los PNG con transparencia pero ninguno es del todo fiable, con algunos no funcionan bien cosas tan simples [...]
Feed RSS de los comentarios de este post.
y cómo lo hago si lo que quiero es ponerle sombra a mi web? es decir necesito que la imagen png se repita verticalmente (repeat-y).
No me funciona y todas las rutas estan ok. Que puede pasar?
Pues no sé, si estás tratando de usar PNG como fondo de un contenedor quizá no te sirva este “truco” puedes probar con la librería javascript IE7 a ver si hay más fortuna.
Un tip, para no estar agregando cada div o class en la sección e código del iepngfix.htc, se puede usar el asterisco, así cualquier elemento estará cubierto y no tendrás que editar cada vez que agregues un div.
*{ behavior: url(#topofpage); }
Saludos
Tienen idea cómo implementarlo en un blog de blogger? Es decir, ahí no encuentro forma de subir el archivo al servidor, ¿se entiende?
Saludos
La solución está bien, pero usando en cada div o con el asterisco en el CSS me anula todos los efectos de a:hover que tengo con imágenes PNG. Aunque solo lo haga en un div, me anula lo demás.
¿Alguien me puede ayudar?
Gracias de antemano
La verdad es que no conozco la solución, puedes probar a utilizar javascript (el enlace dos comentarios más arriba), aplicar el htc sólo a las imágenes que deban tener fondo transparente o probar a declarar los estilos de :hover del resto de las imágenes por debajo de donde cargas el htc en la cascada.
conoceis este?
fix en css utilizando ‘expresions’, se puede añadir con un comentario condicional para ie
_________________________________________________
/* ie6 hack for background images in png */
* html img, * html .png{
azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName==”IMG”?(this.src.toLowerCase().indexOf(’.png’)>-1?(this.runtimeStyle.backgroundImage=”none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src=”images/b.gif”):”):(this.currentStyle.backgroundImage.toLowerCase().indexOf(’.png’)>-1)?(this.origBg=(this.origBg)?this.origBg:this.currentStyle.backgroundImage.toString().replace(’url(”‘,”).replace(’”)’,”),
this.runtimeStyle.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+this.origBg+”‘,sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage=”none”):”),this.pngSet=true);
}
* html .pngr{
azimuth:expression(
this.pngSet?this.pngSet=true:(this.nodeName==”IMG”&&this.src.toLowerCase().indexOf(’.png’)>-1?(this.runtimeStyle.backgroundImage=”none”,
this.runtimeStyle.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+this.src+”‘,sizingMethod=’image’)”,
this.src=”images/b.gif”):(this.origBg=this.origBg||this.currentStyle.backgroundImage.toString().replace(’url(”‘,”).replace(’”)’,”),
this.runtimeStyle.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘,sizingMethod=’scale’)”,
this.runtimeStyle.backgroundImage=”none”)),this.pngSet=true);
}
/* WARNING!
Unclickable child elements inside PNG backgrounds. Puagh!
(a, input, select, textarea, iframe, object, label) fix with -> position:relative */
* html .png a,* html .png input,* html .png select,* html .png textarea,* html .png iframe,* html .png label,* html .png object{azimuth:expression(this.clickFix?this.clickFix=true:(this.currentStyle["position"]!=”absolute”?(this.style.position=”relative”):”),this.clickFix=true);}
/* * html {filter:expression(document.execCommand(”BackgroundImageCache”,false,true));}*/
ah, tambien medio arregla el problema de los enlaces cuando utilizas un fondo con png
un saludo
Gracias!!! es realmente lo que andaba buscando, solo que aun no lo puedo hacer funcionar xD pero por fin estoy seguro que funcionara. (me estoy viendo bastante piedra).
Yo tampoco consigo echarlo a andar. Ayudita por favor!!!
Es simple, subis el archivo al servidor y lo llamáis desde la hoja de estilo en las imágenes que necesitan ser transparentes.
Si no funciona o no os convence podéis probar el método que puso rasputín unos comentarios más arriba, ponéis el código directamente en la hoja de estilo y listo.
Y si con ese tampoco podéis probar la librería javascript que cito unos comentarios más arriba.
¡Suerte!