Problèmes de transparence PNG dans IE8

Question

Je vais avoir des problèmes avec une image au format PNG transparent montrant noir tramé pixel artefacts autour du bord de la non transparence de l'image. Il ne fait cela dans Internet Explorer et il ne fait à partir d'un fichier Javascript, il est utilisé dans.

Voici de quoi je parle... http://70.86.157.71/test/test3.htm (lien mort) ...avis de la jeune fille dans le coin en bas à droite. Elle a des artefacts autour d'elle dans IE8 (je ne l'ai pas testé dans les versions précédentes d'IE, mais je suis en supposant qu'il n'a probablement la même). Il fonctionne parfaitement sous Firefox et Chrome. L'image est chargée à partir d'un fichier Javascript pour produire de l'effet du passage de la souris.

Si vous chargez l'image de lui-même, il fonctionne très bien. Voici l'image... http://70.86.157.71/test/consultant2.png

Personne ne sait comment résoudre ce problème?

L'image a été produite dans Photoshop CS3.

J'ai lu des choses sur le retrait de la Gama, mais qui, apparemment, était dans les versions précédentes de Photoshop et quand je le charge dans TweakPNG, il n'a pas de Gama.

S'il vous plaît aider!

Answer 1

FIXE!

J'ai été confronté au même problème, et juste eu une percée! Nous avons établi que si vous donnez l'image d'une couleur d'arrière-plan ou de l'image, la png s'affiche correctement sur le dessus de cela. La bordure noire a disparu, mais maintenant vous avez un arrière-plan opaque, et c'est à peu près l'emporte sur l'objectif.

Puis je me suis souvenu d'un rgba pour ie filtre convertisseur je suis venu à travers. (Merci à Michael Bester). Donc je me demandais ce qui se passerait si j'ai donné mon problème png un ie filtré fond émulation rgba(255,255,255,0), entièrement s'attend à elle de ne pas travailler, mais permet d'essayer quand même...

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

Presto! Adieu le noir, et bonjour le travail des canaux alpha dans ie7 et 8. Estomper les png, ou de les animer à l'écran, c'est du tout bon.

Answer 2

Je l'ai mis dans un plugin jQuery pour le rendre plus modulaire (vous fournissez le gif transparent):

 $.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};
 

Usage:

 $('.my-selector').pngFix();
 

Remarque: cela fonctionne également si vos images sont des images d'arrière-plan. Il suffit d’appliquer la fonction sur le div.

Answer 3

Je sais que ce thread est mort peu de temps, mais voici une autre réponse à la vieille ie8 png de fond.

Vous pouvez le faire en CSS à l'aide d'IE système de filtrage propriétaire de cette façon:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DÉMO

vous aurez besoin d'utiliser un blank.gif pour la première image dans votre déclaration de fond. C'est tout simplement confondre ie8 et l'empêcher d'utiliser le filtre et l'arrière-plan que vous avez défini, et de n'utiliser le filtre. D'autres navigateurs prennent en charge plusieurs images d'arrière-plan et comprendre le contexte de la déclaration et à ne pas comprendre le filtre, donc en utilisant le fond seulement.

Vous pouvez aussi avoir besoin de jouer avec les sizingMethod dans le filtre pour le faire fonctionner comme vous le souhaitez.

Answer 4

La même chose s’était produite avec un fichier PNG avec transparence défini comme image d’arrière-plan d’un élément <A> auquel une opacité était appliquée.

Le correctif consistait à définir la couleur de fond de l'élément <A>.

Donc, ce qui suit:

 filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
 

Se transforme en:

 /* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
 

Answer 5

PNG les Problèmes de Transparence dans IE8

Dan solution a fonctionné pour moi. Je cherche à faire pâlir un div avec une image d'arrière-plan. Mises en garde: vous ne pouvez pas appliquer un fondu à l'div directement, au lieu de fondu d'un wrapper de l'image. Aussi, ajouter des filtres suivants pour appliquer une image d'arrière-plan:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */      

Veuillez noter que les chemins d'accès dans les attributs src filtres sont absolus, et non pas par rapport à la feuille css.

J'ai également ajouté:

background: transparent\9;

Cette cause, c'est à dire ignorer ma déclaration antérieure de l'image de fond réelle pour les autres navigateurs.

Merci Dan!!!