PNG question de transparence dans IE8

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

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.

  • Le problème est presque sans aucun doute causé parce que vous postulez opacité css (via ie système de filtre), finalement, à une png, qui semble être à l'origine du problème.
  • Avez-vous des suggestions pour quoi modifier pour que cela fonctionne sous IE?
  • Correct. N'utilisez pas l'opacité du filtre (ou tous les autres filtres pour que ce soit), car il introduit des artefacts.
  • Je suis à l'aide de jQuery à s'estomper dans les diapositives - Dans ce cas, il doit faire l'opacité fade.. et maintenant c'est tous les montrant en haut avec les bords noirs. Moyen de contourner cela?
  • Pourriez-vous accepter une réponse afin que je puisse verrouiller ce? Cette question a déjà neuf supprimé réponses; ses attirer beaucoup de "mee tooo!" et "merci!", répond.
InformationsquelleAutor user138777 | 2009-08-09
  1. 106

    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.

    • n'ont pas été en mesure d'obtenir ce correctif de travail...
    • j'ai eu le même problème, mais dans mon cas, un fond blanc suffisait de le contourner. Thxs pour la suggestion
    • En combinant ceci avec le AlphaImageLoader hack ci-dessous sur :hover a fait le tour pour moi.
    • Merci cela a fonctionné pour moi, mais j'ai besoin d'ajouter mon arrière-plan à un autre élément enfant de l'élément d'origine qui était fané .. plus de détails ci-dessous.
    • Ne noter que ce qui semble n'être qu'une correction partielle de l'Explorer encore premultiplies le PNG transparent noir. Ce que cela signifie est que si vous avez, disons section blanche avec une opacité de 50% (en PNG) et ensuite d'appliquer une opacité (via CSS) à l'élément, ce que vous allez voir est en fait GRIS (50% x blanc noir 100%), quel que soit le niveau d'opacité que vous avez spécifié avec votre CSS. Toujours à la recherche d'une vraie solution, mais je n'ai pas trouvé un encore.
    • Merci! Vous m'avez sauvé ce que j'imagine pourraient avoir été des tonnes de temps perdu.
    • en supposant que l'image est un backgroundimage chargés dynamiquement en javascript? comment puis-je appliquer cette solution?
    • PS. La première règle n'a pas fonctionné pour moi sur IE8, seule la deuxième.
    • wow merci, cela m'a sauvé de surf du web pour trouver une solution 😀
    • Cela a très bien fonctionné pour moi, en tant que-est. Merci!
    • Salut! Je peut savoir pourquoi il ne fonctionne pas pour certains d'entre vous. Dans mon cas, j'étais animation de l'opacité avec jQuery. Mais devinez quoi! Vous ne pouvez définir UN filtre de déclaration à un moment (même si vous pouvez mettre plusieurs filtres dans ce "filtre:" la déclaration). Ainsi, lorsque jQuery anime la transparence, il définit un filtre, en substituant les autres. Solution: enveloppez votre image dans un div; application de la alphaImageLoader ou gradient de filtre à l'image et animer l'opacité de la div. Voila!

    InformationsquelleAutor Dan Tello
  2. 9

    J'ai mis ça dans un plugin jQuery pour le rendre plus modulaire (vous offre 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 + "')");
  });
};

    Utilisation:

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

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

    InformationsquelleAutor Mike Cavaliere
  3. 7

    Je sais que ce thread est mort peu de temps, mais voici une autre réponse à la vieille ie8 png 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.

    InformationsquelleAutor Fresheyeball
  4. 5

    J'ai eu la même chose se produire à un PNG avec de la transparence qui a été défini comme image de fond d'écran de l'un <A> élément avec l'opacité appliquée.

    La solution était de définir la couleur d'arrière-plan de la <A> élément.

    Donc la suivante:

    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: ...;
    InformationsquelleAutor Josh Mouch
  5. 4

    La transparence PNG problème avec 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;

    Cela provoque IE ignorer ma déclaration antérieure de l'image de fond réelle pour les autres navigateurs.

    Merci Dan!!!

    InformationsquelleAutor Andrew
  6. 4

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

     background: transparent
     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 */   
    /;
 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 */
    InformationsquelleAutor Kevin G Flynn
  7. 2

    Dan Tello correctif a bien fonctionné pour moi.

    Un autre problème que j'ai trouvé avec IE8 était que, si le PNG a eu lieu dans un DIV avec de petites CSS de la largeur ou de la hauteur de la PNG puis le bord noir de prob a été relancée.

    La correction de la largeur et la hauteur en CSS ou en supprimant totalement fixe.

    • Cela devrait être un commentaire sur la réponse, et non sa propre réponse, mais cela m'a beaucoup aidé!
    InformationsquelleAutor zeniph
  8. 2

    - Je utiliser un CSS corriger plutôt que de JS pour contourner mon tour acculé couche avec une image PNG transparente à l'intérieur de

    Essayer

    .c'est à dire .whateverDivWrappingTheImage img { 
arrière-plan: #ffaabb; /* ce doit être la couleur d'arrière-plan correspondant à votre design */
filtre: chroma(#ffaabb); /* et il doit correspondre à la valeur que vous mettez en couleur d'arrière-plan */
}

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

    InformationsquelleAutor Macomatic
  9. 0

    Veux juste ajouter (depuis que j'ai googlé pour ce problème, et cette question a sauté en premier) IE6 et d'autres versions de rendre la transparence PNG très laid. Si vous avez des image PNG qui est l'alpha transparent (32 bits) et vous voulez le montrer sur certains arrière-plan complexe, on ne peut pas le faire simplement dans IE. Mais vous pouvez l'afficher correctement sur une seule couleur d'arrière-plan aussi longtemps que vous choisissez que des images PNG (ou divs) attribut CSS background-color être les mêmes que les parents background-color.

    Ce qui permettra de rendre le noir où l'image doit être alpha transparent et transparent où alpha de l'octet 0:

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

    Et cela rendra correctement (noter la couleur d'arrière-plan de l'attribut dans l'intérieur de la div):

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

    Complexe alternative à ce qui permet à l'alpha de l'image sur un arrière-plan complexe est d'utiliser AlphaImageLoader de charger et de rendu de l'image d'une certaine opacité. Cela fonctionne jusqu'à ce que vous souhaitez changer l'opacité... Problème en détail et de sa solution (javascript) peut être trouvé ICI.

    InformationsquelleAutor Cipi
  10. 0

    Mon scénario:

    • J'ai eu une image de fond qui a eu un
      24bit alpha des png qui a été mis à un
      ancre de lien.
    • L'ancre était
      l'apparition sur le vol stationnaire à l'aide de Jquery.

    par exemple.

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

    J'ai trouvé que l'application de la majoration prévue par Dan Tello n'a pas fonctionné.

    Cependant, en plaçant un span à l'intérieur de l'élément d'ancrage, et le réglage de l'image de fond d'écran de cet élément, j'ai été en mesure de réaliser un bon résultat à l'aide de Dan Tello du balisage.

    par exemple.

    a.button span { background-image: url(this.png; }
    • Pourquoi le downvote?
    • span ne sont pas des éléments de niveau bloc, comment cela pourrait-il fonctionner si vous ne réglez display:block et hauteur/largeur?
    • si je me souviens bien, je l'aurais utilisé "display: block". Si un point d'ancrage enroule une div, la marque ne passera pas à la validation d'où la raison de l'utilisation d'une balise span.
    • Il sera en HTML5. Ont voté sauvegarder comme une conséquence.
    InformationsquelleAutor codeinthehole