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

- [RIA Services] Include et DomainDataSource par Blog Technique d'Audrey PETIT le il y a 3 heures et 46 minutes

- ZUNE : Version ZUNE Software V 4.2 et la socialisation par Blog Technique de Romelard Fabrice le il y a 5 heures et 11 minutes

- Pratique de Silverlight par Eric Ambrosi par Blog de Frédéric Queudret le il y a 7 heures et 18 minutes

- Apprendre à développer pour les mobiles avec la nouvelle génération .NET par Perspective le il y a 8 heures et 34 minutes

- ZUNE : Nouvelle version du ZUNE Software – V 4.2 par Blog Technique de Romelard Fabrice le il y a 9 heures et 0 minutes

- Nouveau système d'aide pour Visual Studio 2010 : pour ceux qui n'apprécient pas trop l'absence d'index... par CoqBlog le 03-20-2010, 20:05

- L'interface naturelle de Windows Phone 7 Series par Perspective le 03-20-2010, 18:49

- Comment mapper une vue SQL sur une collection de complex type? par Matthieu MEZIL le 03-19-2010, 21:05

- SQL Server : Query Notification ou comment être notifié de modifications de données côté application (SqlDependency) par SQL Server vu par Christian Robert le 03-19-2010, 15:06

- [WF4] Un Binding Activity/ActivityDesigner qui passe mal? par Blog de Jérémy Jeanson le 03-19-2010, 13:42