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

- TechDays Paris 2012 : Session pleinière jour 3 par Blog Technique de Romelard Fabrice le il y a 12 heures et 29 minutes

- Mishra Reader : un lecteur RSS très Zune Style en Open Source ! par Cyril Sansus le il y a 15 heures et 3 minutes

- [framework 4] Les Tasks et le Thread UI par Fathi Bellahcene le il y a 22 heures et 57 minutes

- Workflow Foundation 3 a un pied dans la tombe par Blog de Jérémy Jeanson le 02-08-2012, 22:15

- TechDays Paris 2012 : Nouvelles tendances du poste de travail - Bring Your own PC par Blog Technique de Romelard Fabrice le 02-08-2012, 19:42

- TechDays Paris 2012 : System Center Service Manager 2012 Vue d’ensemble par Blog Technique de Romelard Fabrice le 02-08-2012, 17:32

- TechDays Paris 2012 : Pleinière second jour par Blog Technique de Romelard Fabrice le 02-08-2012, 16:23

- TechDays Paris 2012 : Retour d'expérience sur la mise en place d'un Cloud Privé par Blog Technique de Romelard Fabrice le 02-08-2012, 16:04

- TechDays Paris 2012 : Comment SharePoint a sauvé mes TechDays par Blog Technique de Romelard Fabrice le 02-07-2012, 23:59

- Perspective 3.0 pour Silverlight 5.0 par Perspective le 02-07-2012, 22:39