Pregunta

¿Cómo corregir la transparencia PNG en IE6?

Responder esta pregunta por dudin el 2009-03-12

El caso es que estoy usando varias imágenes de fondo mediante CSS que son PNGs y que además poseen transparencia, pero en Internet Explorer 6 no se muestran correctamente. Muchas de estas imágenes de fondo se colocan usando la técnica de los sprite CSS para hacer mucho más rápida la carga de la página. En fin, ¿Qué técnica ya sea por medio de CSS o JavaScript me recomiendan para resolver este problema?

[reportar pregunta]

Respuestas

DD_belatedPNG es una librería Javascript que permite corregir la transparencia PNG tanto para imágenes en el atributo SRC de un elemento IMG como en la propiedad CSS background-image. Es de notar que no usa la técnica de AlphaImageLoader, la cual falla al aplicar las propiedades CSS background-position y background-repeat.
Puede descargarse la librería sin comprimir desde http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js y comprimida desde http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a-min.js
Ejemplo de uso:

<!--[if IE 6]>

<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('#imagen1, img');
</script>
<![endif]-->

Fuente: Medicine for your IE6/PNG headache! http://www.dillerdesign.com/experiment/DD_belatedPNG/

por Anónimo el 2009-03-12

[reportar al moderador]

Otro script para corregir la transparencia PNG en IE6 pero basado en la librería Prototype:

/*
  * Requiere  "Prototype JavaScript framework (1.6.0)":http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate
  * Funciona en *etiquetas img* y en * imágenes de background*
  * PNG pueden usarse como backgrounds. Sin embargo, en las imágenes repetidas no funciona*
 
Ejemplo: 
 $('yourPNG').pngHack();
 $$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');
 
*/
Element.addMethods({
  pngHack: function(el){
    var el = $(el);
    if (!Prototype.Browser.IE) return el;
    var gif = 'images/s.gif';
    if ((el.match('img')) && (el.src.include('png'))){
      var alphaImgSrc  = el.src;
      var sizingMethod = 'scale';
      el.src = gif;
    } else if (el.getStyle('backgroundImage').include('png')){
      var bgc = el.getStyle('backgroundColor') || '';
      var alphaImgSrc = el.getStyle('backgroundImage').gsub(/url\(|\)|'|"/, '');
      var sizingMethod = 'crop';
      el.setStyle({ background: [bgc, ' url(', gif, ') no-repeat'].join('') });
    } else {
      return el;
    }
    el.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{al}",sizingMethod="#{sz}")'.interpolate({ al: alphaImgSrc, sz: sizingMethod });
    return el;
  }
});