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

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01