Existe-t-il un correctif JavaScript PNG pour IE6 permettant le positionnement d'arrière-plan CSS?

Question

J'ai constaté quelques corrections permettant aux images PNG d'avoir une transparence dans Internet Explorer 6, mais je n'ai pas encore trouvé de solution permettant également de définir la position de l'arrière-plan dans CSS. Si vous utilisez des sprites, c'est un deal-breaker. J'ai eu recours à des fichiers GIF (qui ne sont pas d'une aussi grande qualité), à des images non transparentes ou à une feuille de style totalement différente de IE6. Existe-t-il un correctif pour IE6 permettant la transparence PNG ET le positionnement en arrière-plan?

Answer 1

Oui. Convertissez vos images pour utiliser des palettes indexées (png256). Vous pouvez prendre en charge la transparence (comme gif), mais pas un canal alpha.

Vous pouvez le faire en utilisant Irfanview et le plug-in pngout, pngquant ou pngnq .

L'équipe chargée de la performance YUI a également effectué une Une excellente présentation qui couvre ce concept et de nombreux autres concepts d'optimisation de l'image.

Answer 2

Il s'agit d'une nouvelle technique qui est apparue au cours du dernier mois. De la page:

  

Dans ce script, les balises d'image sont prises en charge, avec et sans séparateur GIF vierge. Les images PNG d'arrière-plan peuvent être positionnées, voire répétées, même si elles sont plus petites que leur élément de contenu.

Answer 3

Lorsque l'arrière-plan est statique, j'utilise TweakPNG pour modifier le fragment de couleur d'arrière-plan du fichier PNG en la couleur correcte (au lieu de la couleur grise par défaut). Tous les navigateurs habituels l'ignoreront car le canal alpha le remplacera, mais IE6 et les versions antérieures utiliseront cette couleur au lieu du canal alpha.

Cela signifie que nous avons la transparence dans IE7 + et que nous nous dégradons bien dans IE6 et les versions antérieures. Et tous les css de positionnement et de répétition sont possibles (car il n'y a pas de hacks!).

Answer 4

DD_belatedPNG.js fonctionne très bien

Answer 5

Vous pouvez réellement utiliser du CSS pur pour obtenir des images d’arrière-plan positionnées avec une transparence alpha dans IE6 en tirant parti des filtres alpha de IE6 et de la propriété CSS clip . Julien Lecomte décrit la technique sur son blog .

Notez que cette technique a un impact négatif sur les performances pour chaque utilisation d'un filtre alpha.

Answer 6

Le correctif IE PNG v2.0 prend en charge le positionnement alpha + complet / répéter .