web-dev-qa-db-fra.com

Problème de transparence de PNG dans IE8

J'ai des problèmes avec une image PNG transparente montrant des artefacts de pixels tramés noirs autour du bord de la partie non transparente de l'image. Cela ne se fait que dans Internet Explorer et à partir d'un fichier Javascript dans lequel il est utilisé.

Voici ce dont je parle ... http://70.86.157.71/test/test3.htm (lien maintenant mort) ... remarquez la 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 suppose que c'est probablement pareil). Cela fonctionne parfaitement dans Firefox et Chrome. L'image est chargée à partir d'un fichier Javascript pour produire l'effet de survol.

Si vous chargez l'image tout seul, cela fonctionne bien. Voici l'image ... http://70.86.157.71/test/consultant2.png

Comment régler ceci?

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

J'ai lu des articles sur la suppression du Gama, mais c'était apparemment dans les versions précédentes de Photoshop et lorsque je le charge dans TweakPNG, il ne contient pas Gama.

javascriptinternet-explorerinternet-explorer-8pngiepngfix
76
user138777

FIXED!

Je suis aux prises avec le même problème et je viens de faire une percée! Nous avons établi que si vous attribuez à l'image une couleur d'arrière-plan ou une image, le png s'affiche correctement par dessus. La bordure noire a disparu, mais vous avez maintenant un arrière-plan opaque, ce qui va à l'encontre du but recherché.

Ensuite, je me suis souvenu d’un convertisseur de filtres rgba c’est-à-dire que j’ai rencontré. (Merci à Michael Bester). Je me suis donc demandé ce qui arriverait si je donnais à mon problème pngs un fond filtré émulant rgba (255,255,255,0), en espérant que cela ne fonctionnerait pas, mais essayons 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 les canaux alpha actifs dans ie7 et 8. Fondu à l’intérieur ou en fondu de vos fichiers png, ou les animer sur l’écran - c’est bien.

106
Dan Tello

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.

9
Mike Cavaliere

Je sais que ce fil est mort depuis quelque temps, mais voici une autre réponse à la vieille question de fond d’i8 png.

Vous pouvez le faire en CSS en utilisant le système de filtrage exclusif d’IE comme ceci:

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

DÉMO

vous devrez utiliser un blank.gif pour la "première" image dans votre déclaration d'arrière-plan. Cela consiste simplement à confondre ie8 et à l'empêcher d'utiliser à la fois le filtre et l'arrière-plan que vous avez défini, et d'utiliser uniquement le filtre. D'autres navigateurs prennent en charge plusieurs images d'arrière-plan et comprendront la déclaration d'arrière-plan sans comprendre le filtre, n'utilisant donc que l'arrière-plan.

Vous devrez peut-être aussi jouer avec la méthode sizingMethod dans le filtre pour que cela fonctionne comme vous le souhaitez.

7
Fresheyeball

Il m'est arrivé la même chose avec un fichier PNG avec une transparence définie 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: ...;
5
Josh Mouch

s'il vous plaît essayer ci-dessous le code.

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
4
Kevin G Flynn

Projet de transparence PNG dans IE8

La solution de Dan a fonctionné pour moi. J'essayais de faire disparaître une div avec une image de fond. Mises en garde: vous ne pouvez pas fondre la div directement, mais fondre une image wrapper. Ajoutez également les 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 dans les attributs src des filtres sont absolus et non relatifs à la feuille css.

J'ai aussi ajouté:

background: transparent\9;

Cela entraîne IE) à ignorer ma déclaration antérieure de l'image d'arrière-plan réelle pour les autres navigateurs.

Merci Dan !!!

4
Andrew

J'utilise un correctif CSS plutôt que JS pour contourner mon calque arrondi avec un fichier PNG transparent à l'intérieur

Essayer

. Autrement dit./* ceci devrait être la couleur de fond correspondant à votre dessin réellement */
 filtre: chroma (#ffaabb);/* et cela devrait correspondre à la valeur que vous avez mise dans la couleur de fond */
}

Cela peut nécessiter plus de travail sur ie9 ou plus tard.

2
Macomatic

La réparation de Dan Tello a bien fonctionné pour moi.

Un problème supplémentaire que j'ai trouvé avec IE8 était que si le fichier PNG était stocké dans une division DIV avec des dimensions de largeur ou de hauteur CSS inférieures à celles du fichier PNG, le problème noir Edge était réactivé.

Corriger les CSS de largeur et de hauteur ou bien les supprimer complètement.

2
zeniph

Je veux juste ajouter (puisque j'ai cherché sur Google pour ce problème et que cette question a été posée en premier) IE6 et d'autres versions rendent la transparence PNG très laide. Si vous avez une image PNG alpha transparente (32 bits) et que vous souhaitez l'afficher sur un arrière-plan complexe, vous ne pouvez jamais le faire simplement dans IE. Mais vous pouvez l'afficher correctement sur un fond de couleur unique tant que vous définissez cet attribut CSS d'images PNG (ou divs) background-color être le même que les parents background-color.

Donc, cela rendra le noir où l'image devrait être alpha transparent, et transparent où l'octet alpha est 0:

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

Et cela rendra correctement (notez l'attribut background-color dans le div interne) :

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

Une alternative complexe à cette opération, qui active une image alpha sur un fond complexe, consiste à utiliser AlphaImageLoader pour charger et restituer une image de l’opacité définie. Cela fonctionne jusqu'à ce que vous vouliez changer cette opacité ... Le problème en détail et sa solution (javascript) peuvent être trouvés ICI .

0
Cipi

Mon scénario:

  • J'avais une image d'arrière-plan avec un png alpha 24 bits défini sur un lien d'ancrage.
  • L'ancre s'estompait en vol stationnaire à l'aide de Jquery.

par exemple.

a.button { background-image: url(this.png; }

J'ai constaté que l'application de la majoration fournie par Dan Tello ne fonctionnait pas.

Cependant, en plaçant une étendue dans l'élément d'ancrage et en définissant l'image d'arrière-plan sur cet élément, j'ai pu obtenir un bon résultat en utilisant le balisage de Dan Tello.

par exemple.

a.button span { background-image: url(this.png; }
0
codeinthehole