Por necesidades de trabajo tenía que integrar imágenes png transparentes en una web. «Obviamente» tenía que ser ser compatible con Explorer 6, por lo que iba a tener que recurrir al ya clásico pngfix.htc.
Fué entonces cuando buscando el archivo, me encontré con un artículo en el cuál decían que se podia utilizar la transparencia del png sin necesidad de archivos externos. Sólo CSS … y un poquito de javascript en la hoja de estilos.
El código es el siguiente
1 2 3 4 5 6 7 8 9 10 | * html img, * html .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 = "transparent.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) ); } |
Es posible también adjuntarlo desde una hoja de estilos externa, colocando el condicional de turno por si el usuario acceder desde un Explorer 6
1 2 3 4 | <!--[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”png_fix.css” /> <![endif]–> |