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é:
avant.jpg
Avec l'exception:
apres.jpg

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