CSS : Fond transparent en PNG

Voici une petite astuce compatible IE6, Gecko, et IE7beta2, qui vous permet de faire fonctionner vos PNG transparents au sein de vos pages web.
    div {        background:transparent url(monimage.png) no-repeat top left; /* IE6, IE7beta2, Gecko */        _background:none; /* IE6 */        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='monimage.png', sizingMethod='scale'); /* IE6 */    }


Publié mercredi 12 avril 2006 08:18 par guillaume
Classé sous ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

# re: CSS : Fond transparent en PNG mercredi 12 avril 2006 13:17

héhé, je vais me sentir moins seul si toi aussi tu blogs sur CSS ;)

Attention avec cette méthode, car le comportement est différent des background-image classique !
en effet, IE va resizer l'image, donc si vous avez un div de 100*50px et que l'image fait 300*400px, elle va etre reduite ! alors que normalement elle devrait être rogné :)

On peut également appliquer cette astuce pour toutes les images png de la page. En utilisant l'astuce expliqué ici : http://homepage.ntlworld.com/bobosola/index.htm

pour la doc sur le AlphaImageLoader c'est ici :
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp

cyril

# re: CSS : Fond transparent en PNG mercredi 12 avril 2006 13:53

Vraiment sympa comme astuce.
Il y en a qui vont s'amuser ;)

Bisou

# re: CSS : Fond transparent en PNG jeudi 13 avril 2006 17:15

Je ne pense pas que ce soit aux normes W3C non ?

Pym

# re: CSS : Fond transparent en PNG jeudi 13 avril 2006 18:09

Oui, l'utilisation de l'underscore et des filtres IE n'est pas une norme W3C.

Cependant, en terme de sémantique ceci ne pose aucun problème d'accessibilité ou autre. Votre page HTML ou XHTML reste valide (on reste compatible avec les navigateurs classiques et les navigateurs-texte). Seule votre page CSS n'est pas valide W3C (utilisation de l'underscore et du filtre). Ces fonctionnalités ne sont pas interprétés par les navigateurs respectant la norme CSS du W3C.

Vous ne pourrez donc effectivement pas mettre la petite image "certified CSS" en bas de votre site... mais votre site sera accessible et aura le même rendu sur IE6, IE7 et Gecko.

guillaume

Les 10 derniers blogs postés

- La suite ...Proposition de collaboration rédactionnelle entre les communautés de développeurs et Microsoft France par LucasR le il y a 11 heures et 41 minutes

- [Fun] Votre simulateur de vol avec Microsoft ESP par Julien Chable le il y a 17 heures et 24 minutes

- [Best Practices] Customisation du My Site : Comment le modifier en amont et en aval par The Mit's Blog le il y a 18 heures et 38 minutes

- Patrick Tisseghem s'en est allé ... par The Mit's Blog le il y a 19 heures et 22 minutes

- MS AutoCollage par alex# le il y a 20 heures et 7 minutes

- Un grand SharePointeur nous a quitte : Patrick Tisseghem manquera à la communauté ! par RedoBlog - The .NET Gentleman !!! le il y a 20 heures et 33 minutes

- [WPF] Comment charger dynamiquement un fichier XAML qui définit des eventhandler ? par Thomas Lebrun le 09-04-2008, 10:56

- Article sur le filtrage des modèles de site SharePoint par The Grib's Lair [Sébastien PICAMELOT - MVP SharePoint] le 09-04-2008, 00:11

- Adopter votre Redo en 3D - Clone Virtuel - avec photosynth par RedoBlog - The .NET Gentleman !!! le 09-04-2008, 00:07

- [Expression Web] Astuce de la Semaine : Mettre en bouton ses macros dans une barre d'outils. par Expression Web & Me le 09-03-2008, 20:48