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

- [Perso] Découvertes estivales : Linux (Part I) par Le blog de FremyCompany le il y a 2 heures et 40 minutes

- [Refactoring] ReSharper pour Visual Studio 2010 (Preview) par Thomas Jaskula le il y a 17 heures et 16 minutes

- [Refactoring] Analyser vos exceptions avec ReSharper Exceptional par Thomas Jaskula le il y a 18 heures et 30 minutes

- SharePoint 2007 : patterns & practices SharePoint Guidance par Philippe Sentenac [MVP SharePoint] le 07-03-2009, 09:56

- [Visual Studio 2010] Les tests cases c’est bien, mais je vais devoir tout réécrire ? par Etienne Margraff le 07-03-2009, 09:00

- MVP[Gribouillon].AddYear par The Grib's Lair [Sébastien PICAMELOT - MVP SharePoint] le 07-03-2009, 08:45

- Clinique INSIA - Projet de fin d’Etudes (Silverlight 3 MVVM et OutOfBrowser, WCF, TFS) - Part 1 par David REI le 07-02-2009, 23:38

- C’est la crise ? Bah pourquoi cramer du budget pub alors ? par Nix's Blog le 07-02-2009, 15:31

- Soyons MVP ! par TheSaib .NET blog le 07-02-2009, 12:15

- SharePoint : Gestion des Erreurs 6398, 7076 et 6482 par Blog Technique de Romelard Fabrice le 07-02-2009, 11:53