Voici un petit complément à l'article ”png transparent” qui vous permettra d'utiliser des png transparents pour vos backgrounds.
/* 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; }
<div class="content"> test ! </div>
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:
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
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 :)
Chez moi ça marche, essaye sans les valeurs de “position”
En fait, le src dans AlphaImageLoader doit être relatif au fichier, et pas relatif à l'endroit où est la css. Par contre, je ne suis pas arrivé à contourner le fait que les liens n'étaient pas actifs. ça n'a pas marché de mettre position:relative dans mes liens…
Ne marche pas chez moi