Les personnes développant des sites Web avec des images transparentes au format PNG ont déjà rencontré ce problème.

En effet, sous Internet Explorer[1] les images transparentes au format PNG ne s’affichent pas correctement. La partie de l’image qui devrait être transparente est grise. Si le fond est du même gris, cela ne pose pas de problème. Mais malheureusement, c’est rarement le cas.

Aurélien Catinon présente sur son weblogue une solution qu’il a trouvé sur ce site.

La solution

Pour résoudre ce problème, il suffit d’insérer un bout de code JavaScript. Deux méthodes sont possibles selon la façon utilisée pour afficher l’image.

Les images provenant du tag <img>

Pour cela, il faut intégrer ce fichier JavaScript. Puis, le code suivant doit être ajouté dans les pages HTML[2].

<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->

Les images provenant d’une feuille CSS

Il faut remplacer ces propriétés :

background-image: url("image.png");

Par celles-ci :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='image.png');
background-image: none;

Résultat

Cette astuce a été utilisée pour le site Debian Addict. Les trois images en haut à droite sont des PNG avec un fond transparent.

Notes

[1] Par exemple avec IE6.

[2] Notez l’utilisation d’un quirks mode pour les commentaires conditionnels.