l’Ultimate transparence des PNG sous IE6 avec du CSS
Le 19 décembre 2007 par Benoit
un grand merci a Shemu pour sa trouvaille sur KomodoMedia!
En effet c’est le script le plus efficace qu’il m’a été donné de « trouver » pour résoudre le fichu problème de canal alpha des PNG sous IE6.
Le code a mettre dans votre css :
* 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)
);
}
Placez un gif transparent à coté de votre CSS nommé « transparent.gif » (si vous voulez le mettre dans le dossier « images » ou autre n’oubliez pas de changer le chemin dans le code si dessus)
il ne vous reste plus qu’a affecter la class « png » aux images .png de vos pages, idem pour les blocs et autres avec un .png en background CSS.
Pour des exemples, je vous invite à visiter le site de KomodoMedia.
Sinon il y a toujours la solution de changer le gris par defaut qu’affiche IE6, via le logiciel TweakPNG (un tuto est dispo ici phoenity.com), pas top si vous n’avez pas un fond uni!
Derniers Commentaires