Llevo mucho tiempo aplicando soluciones mas o menos ortodoxas para solucionar el bug que tiene explorer a la hora de pintar png transparentes.
Hay muchas webs que han planteado soluciones a este problema con mayor o menor exito, pero con este articulo pretendo solucionar de una vez por todas una duda que mucha gente tienen rondando por la cabeza…¿Uso imagenes en formato png en explorer? SI
Solución #1
La primera solción que encontré y la que llevo usando mas tiempo es la utilización de este js. qu basicamente se encarga de recorrer todas los elementos con la etiqueta img y aplicarles el famoso filtro..
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png');
En principio es interesante, pero llegado el momento de utilizar imagenes png como fondo (background) no nos funciona.
En caso de utilizar el codigo/concepto superior tendríamos que generar 2 estilos diferentes, uno para firefox y otro para explorer con una forma similar a esta:
recorrer todas los elementos con la etiqueta img y aplicarles el famoso filtro..
.logo{
width:200px;
height:200px;
/* Mozilla no hace caso de esta cantidad
de mierda necesaria en explorer */
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='imagen.png');
}
.logo[class]{
background:url(’bg_t.png’);
}
La primera class vale para explorer, pero necesitamos forzar la imagen de fondo para el resto de navegadores, por lo que con la segunda class eso quedaría resuelto.
Estas soluciones no son… “malas” pero necesitaba una solución menos “engorrosa”.
Solución #2 (buena)
Esta solución es mas sencilla pero require de algo mas de preparación.
Esto es lo que necesitais
- iepngfix.htc
- blank.gif
- algo de css…
El css que necesitareis incluir será el siguiente:
img { behavior: url(iepngfix.htc); }
Desde ese momento todas los elementos con nombre img (las imagenes) pasaran por la piedra, digo… behaivor con su pertinente funcionamiento en explorer.
- Pero… yo lo que tengo esa una imagen en png, pero la tengo como fondo de un div con id contenedor, ¿Qué hago?
#contenedor{background:url('fondo_de_mi_web.png');}
#contenedor,img { behavior: url(iepngfix.htc); }
Todos los elementos img y #contenedor pasaran por el behaivor.
Tanto con la solución 1 como con la 2, tenemos un problema insolucionable (a mi entender). En el caso de querer un png de fodo con repetición en explorer. El filtro de explorer encargado de solucionar este problema no nos permite definir repetición x o y, por lo que en esos casos tendremos que encontrar una solución alternativa en cuanto a diseño.
Espero que os sirva de algo el pequeño tutorial.









3 Comentarios
Desde luego una gran solución para aquellos que diseñamos y nos preocupamos de que las cosas se vean en el maldito explorer… Porque no todo el mundo usa Firefox.
Thanks neo!
Yo tambien uso la solucion 2 pero cuando hay una etiqueta a no funciona la misma , es decir no s epuede hacer click
=(
Hola, yo también uso la segunda, pero tengo un problema solo me funciona si exporto el png con 8 colores, con 24 (que es como mejor se ve) no funciona. No se si sabeis algún truco para esto ya que de esta manera se ve la transparencia pero con muy mala calidad cuando hay un color de fondo diferente al blanco.
Gracias!
Incoming Links
Deja tu granito de arena