PNGs con transparencia en Internet Explorer

Alma Fernández 14/07/2006

Una de las “novedosas novedades” del Internet Explorer 7 es el soporte a la transparencia de los PNG, ¡por fin! No obstante, seguro que aún nos quedan algunos años de versiones anteriores que no tragan bien con las transparencias.

Para solucionar este “pequeño” inconveniente existen algunos trucos, unos sirven para unos casos , otros para otros.

Soluciones:
Con Javascript
Con filtros propietarios para Internet Explorer y CSS

Con Javascript:

Bob Osola ideó esta solución para conseguir que las imágenes PNG contenidas en las etiquetas img se representen correctamente con su transparencia.

Utilizando un comentario condicional averiguamos si el visitante utiliza alguna versión inferior a Explorer 7

<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->

y si es así cargamos el script contenido en un archivo llamado, por ejemplo, png.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Como todo, esta solución tiene sus pros y contras:

Pros:

Se ignora como un comentario en navegadores que no sean Internet Explorer
Funciona con Doctypes estrictos y transicionales.
No rompe con la validación del W3C
Ligero y simple de implementar
Funciona con estilos en linea y externos

Contras:

No funciona en navegadores anteriores a la versión 5.5 (aunque dado que el soporte para versiones anteriores ya no existe…)
Requiere Javascript
No soporta las imágenes de fondo establecidas con CSS
Se pierden las reglas de estilo aplicadas al elemento img en las imagenes PNG, se soluciona creando una clase que añadir a dichas imágenes que cumpla las mismas funciones.
```
<img src="imagen.png" class="png" />
```

Filtros propietarios para Explorer y CSS

Cuando lo que queremos es aplicar imagenes PNG con transparencia como fondos por medio de CSS se hace nesario recurrir a filtros. Para no romper la validación de nuestro código incluiremos un comentario condicional, como el del anterior ejemplo para que, si el usuario usa Internet Explorer por debajo de la versión 7, se cargue una hoja de estilo adicional que aplique el truco.

<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>Titulo de la Página</title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Entonces, añadimos la imagen de fondo en el CSS general

#header {
background-image: url(fondo.png);
background-repeat: no-repeat;
}

y, al archivo ie.css de la siguiente forma

#header {
background: none; /* Eliminamos el fondo cargado por el CSS general */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fondo.png",
sizingMethod="image");/*Añadimos la imagen de fondo por medio de un filtro*/
background-repeat:no-repeat;
}

Sin duda, ninguna de las dos soluciones son lo ideal pero hacen el trabajo que, a fin de cuentas es lo que queremos ¿no?

Otras entradas que pueden interesarte:

Codigo, CSS, Javascript

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

xalportadorx dice:

18 septiembre 2006 a las 3:08

jo muchas gracias hace mucho que necesitaba algo así

Joaquin Souyris dice:

5 marzo 2007 a las 1:02

A mí me pasa algo extraño, al intentar poner el fondo png en formato css, para una tabla, la tabla toma el tamaño de la imagen de fondo.

y la imagen es de 100×100 px por ende no se lee lo que esta en la tabla, tuve que agrandar la imagen de fondo, pero la idea es que la imagen se repita, para llenar la tabla

nefty dice:

29 agosto 2007 a las 22:32

Acerca del problema de Joaquin Souyris, el png como fondo dentro del css para que se repita no funciona. Quisiera saber si usted sabe como lograr que el png no se estire a la propiedad definida en el filtro como “sizingMethod” podria ser como “AUTO” de tal forma que se estire o repita y sea por x-axis o y-axis.

Porfavor agradeceria comentarios..

[``**Yill!an**] dice:

9 septiembre 2007 a las 5:01

me gutaria utilizarlo…tengo la version ultima de explorer..como podria usarlo..y como podria yo…buscar diseños…crear los propios?

por favor me gustaria saber

saludoz

chauzzzzzzz

fredy dice:

22 febrero 2008 a las 2:37

Tengo los siguiente problemas y lo he probado con JS y CSS:
- Algunos funciona la transparencia y en otras se pierde la imagen (cuando se usa el CSS, con el blank.gif.
- Cuando uso con JS no puedo usarlo como una imagen con un link.
- Y cómo hacer el efecto de agrandar la imagen al pasar el mouse y este a la vez sea un link, usando PNG con transparencia.

Alma Fernández dice:

22 febrero 2008 a las 7:53

La verdad es que no funciona para imágenes de fondo. Puedes probar ie7, la librería javascript de Dean Edwards a ver si te va algo mejor.

moraalberto dice:

27 febrero 2008 a las 17:29

Tengo un problema que me urge resolver con un sitio en el que trabajo, la mayoría de las imágenes como botones y algunos fondos están en png y como ya sabemos en explores con versiones inferiores a la 7 me aparecen con un fondo gris o celeste, todas son con trasnparencias y no fueron incertadas como css, todas fueron incertadas como layers. ME URGE, NECESITO CORREGIRLO. CÓMO PUEDO HACERLO? SALUDOS Y GRACIAS.

WalteR Bove dice:

5 marzo 2008 a las 14:37

Me funciona perfecto, puse la imagen.png transparente como fondo y se visualiza bien en IE. Pero a raíz de esto, los links que quedan por arriba ya no funcionan. Que puede estar pasando?

5 marzo 2008 a las 16:50

Parece que eso es consecuencia del hack, prueba a emplear la libreria de Dean Edwars que le recomendé a fredy aunque mucho me temo que tiene mala solución…

gustavo dice:

12 junio 2008 a las 0:30

Y como seria si la imagen png no esta de fondo sino con un link sobre ella? gracias

pepe dice:

16 junio 2008 a las 14:54

esta chimbada no sirve para puta madre no sean tan incapaces

Ariel dice:

2 junio 2009 a las 17:22

Me has salvado!!! muchas gracias la opcion en JS me sirvio de sobremanera

les recomiendo ieTester para probar su sitios en todos los ie
http://www.my-debugbar.com/wiki/IETester/HomePage

Matias_87 dice:

24 agosto 2009 a las 6:24

Muchas gracias!!! me vino de 10 me sacaste un dolor de cabeza probe de todo y este post es el unico que me sirvio. Funciona!

Asi quedo mi pagina
http://www.axelpasacalles.com.ar

Ferran Pont dice:

30 enero 2010 a las 23:57

Hola: se me ocurrió de repente.. hay un tipo de png tranparente que funciona en el maléfico IE6, y es el png 8. Ahora bien hay dos caveats: hasta donde sé, solo Fireworks exporta png8, y el resultado es solo decente.
Por lo tanto: Si ponemos un condicional que detecte IE6 y con el pedimos una hoja css especial para IE6 que tenga el background con el png8 y dejamos que el resto de los navegadores difruten de un buen png cn transparencia alfa en nuestra hoja de estilos principal, estaríamos del lado seguro y “castigaríamos” ligeramente a los ususarios que insisten con ese horror de navegador…con un png de un poco menos de calidad…
(just kidding)
(if lt IE 7) y con el pedimos un archivo css que tenga como background el png8