hack-png-ie6

La transparencia PNG en IE 6 no funciona correctamente, pero podemos encontrar una solución a este problema con el hack que os voy a mostrar a continuación. Se puede usar con imágenes de fondo o para imágenes HTML en línea. Esta entrada es una ampliación de la expuesta anteriormente.

Imágenes de fondo

No puede ser usado con repetición y necesita ancho y alto fijo. Para usarlo debes insertar la ruta de la imagen PNG por la que incluyo por defecto, además de ajustar el ancho y alto que tenga tu imagen, obviamente:

.miselector {

width:200px;

height:100px;

background: url(/carpeta/imagen.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/carpeta/imagen.png',sizingMethod='crop');

}



Imágenes HTML en línea

Requiere un píxel .GIF transparente de 1x1px.

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior="none")&&(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/pixeltransparente.gif"):(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));

}

Si tienes alguna duda puedes preguntarla en el foro de la comunidad.



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!