Utiliser des PNG transparent même avec internet explorer

Voici un petit complément à l'article ”png transparent” qui vous permettra d'utiliser des png transparents pour vos backgrounds.

Le css

css

/* On applique une image de fond à la balise body afin de mieux se rendre compte de l'effet de transparence. Cet ligne est donc ici à titre indicative*/
body {
background-image:url(fond.jpg);
}
.content {
/* la première ligne applique le background à la classe content pour tous les navigateurs.
La seconde ligne supprime le background (uniquement pour IE) précédement appliqué.
La troisième ligne applique le background (uniquement pour IE) de manière à ce que IE puisse gérer la transparence du png.
*/	
background-image:url(transparent.png) !important; 
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='transparent.png');
/* les deux lignes suivantes sont facultatives elles permettent de mieux se rendre compte de l'effet de transparence */
height:500px; 
width:500px;
}

L'attribut !important indique au navigateur que la ligne suivante qui concernera le même élément (ici le background-image) devra être ignoré. Heureusement pour nous IE ne gère pas cette information il lira donc successivement les deux ligne s et la seconde écrasera la première.

Le code html

html4strict

<div class="content">
test !
</div>

Le résultat

Voila le résultat dans internet explorer:
Sans appliquer l'exception pour internet explorer on voit bien que la transparence n'est pas géré:

Avec l'exception:

A savoir

Sachez que le filtre:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='transparent.png');
Aura la facheuse tendance à désactiver les liens se trouvant dans la boite qui contien votre background. La solution est de mettre position:relative à vos liens.

— maniT4c 18/01/2006 08:32

Discussion

Ferreira Patrick, 05/06/2008 11:52:

Aïe, ça marche pas chez moi … ni sous IE6 ni IE7 …

voila mon code :

#navigation dd {

padding: 10px 10px 0px 10px;
background: transparent none no-repeat scroll 10px center; /* je set les valeurs de positionnement */
/* bugfix pour la prise en charge de la transparence d'un png. */
background-image: url('../usr/FRA/ebsco/img/white_star.png') !important;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale' src='../usr/FRA/ebsco/img/white_star.png');
/* -- bugfix pour la prise en charge de la transparence d'un png. */

}

merci tout de même pour tout ces 'wikistuces' dont tu nous fais part :)