Truquito png semitransparente con css version 2.0
Estuve usando mi código el código que encontré por ahí para habilitar las transparencias en ie6 y he hecho un par de mejoras. A saber:
Incluyo el css con comentarios condicionales solo para ie6:
<!--[if lte IE 6]>
<?php echo $html->css('fix_ie');?>
<![endif]-->
Como hago esto, no hace falta poner el * html antes de cada selector.
Además, tengo dos bloques de código distintos, uno es para imágenes sin repetir (no-repeat) y el otro para imágenes como sombras, bordes, etc. Que si bien son repeat-y o repeat-x, a mi me da lo mismo si se repiten o se estiran.
El problema con este método es que no encontré forma de hacer que la imágen se repita. Pero como para lo único que necesito imágenes repetidas es para hcer sombras, con una imágen de 1px, me da lo mismo si repite o estira, por ende puedo usar el otro modo.
El codigo entonces me queda con una base de dos bloques (dentro de fix_ie.css):
img, .png-no-repeat{
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='image')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
y para los que deben “repetirse”:
.png-repeat {
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='scale')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
Nótese donde dice sizingMethod=’scale’ que es la parte que hace la magia.
Agregando esto en nuestro html, ahora podemos hacer que cualquiera de nuestros pngs cargue la transparencia, tanto para no-repeat como para los repeat-x o repeat-y.
Un problema con el que me topé es que a veces, ie6 hace desaparecer el fondo cuando le pongo la opcion scale o repeat, la solucion a esto ha sido siempre especificar explícitamente el ancho en píxels del div en cuestión. Parece que ie tiene problemas para calcular tamaños.
Otra solución para el div que desaparece cuando le pongo transparencia es darle position:absolute; al div.
Leí por ahí que a algunas personas les desaparecen los links dentro de un div con fondo semitransparente. Y leí tambien que la solución a eso es poner position:relative; a todos los links dentro del div.
Hablando de Hackers….
