PNG-Transparenzproblem in IE8

Ich habe Probleme mit einem transparenten PNG-Bild, das schwarze Dither-Pixel-Artefakte am Rand des nicht transparenten Teils des Bildes zeigt. Dies geschieht nur in Internet Explorer und nur in einer Javascript-Datei, in der es verwendet wird.

Hier ist, wovon ich spreche ... http://70.86.157.71/test/test3.htm(Link jetzt tot) ... beachte das Mädchen in der unteren rechten Ecke. Sie hat Artefakte in IE8 um sich (ich habe es in früheren Versionen von IE nicht getestet, aber ich gehe davon aus, dass es wahrscheinlich dasselbe tut). Es funktioniert perfekt in Firefox und Chrome. Das Bild wird aus einer Javascript-Datei geladen, um den Mouseover-Effekt zu erzielen.

Wenn Sie das Bild alleine laden, funktioniert es einwandfrei. Hier ist das Bild ... http://70.86.157.71/test/consultant2.png

Wie kann ich das beheben?

Das Bild wurde in Photoshop CS3 erstellt.

Ich habe Dinge über das Entfernen des Gama gelesen, aber das war anscheinend in früheren Versionen von Photoshop und wenn ich es in TweakPNG lade, hat es kein Gama.

FEST!

Ich habe mit dem gleichen Problem gerungen und hatte gerade einen Durchbruch! Wir haben festgestellt, dass, wenn Sie dem Bild eine Hintergrundfarbe oder ein Bild geben, das PNG ordnungsgemäß darüber angezeigt wird. Der schwarze Rand ist verschwunden, aber jetzt haben Sie einen undurchsichtigen Hintergrund, und das macht den Zweck ziemlich zunichte.

Dann erinnerte ich mich an einen RGBA-Filterkonverter, auf den ich stieß. (Danke an Michael Bester). Also fragte ich mich, was passieren würde, wenn ich meinen Problem-PNGs einen gefilterten Hintergrund geben würde, der rgba (255,255,255,0) emuliert, und erwartete, dass es nicht funktioniert, aber lassen Sie es uns trotzdem versuchen ...

.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! Auf Wiedersehen schwarz und hallo arbeitende Alpha-Kanäle in IE7 und 8. Blenden Sie Ihre PNGs ein und aus oder animieren Sie sie über den Bildschirm - alles ist gut.

Ich habe dies in ein jQuery-Plugin eingefügt, um es modularer zu gestalten (Sie liefern das transparente GIF):

$.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 + "')");
  });
};

Verwendung:

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

Hinweis: Dies funktioniert auch, wenn Ihre Bilder Hintergrundbilder sind. Wenden Sie einfach die Funktion auf das div an.

Ich weiß, dass dieser Thread einige Zeit tot war, aber hier ist eine andere Antwort auf das alte Problem mit dem ie8 png-Hintergrund.

Sie können dies auch in CSS tun, indem Sie das proprietäre Filtersystem des IE wie folgt verwenden:

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

DEMO

Sie müssen ein blank.gif für das 'erste' Bild in Ihrer Hintergrunddeklaration verwenden. Dies dient lediglich dazu, ie8 zu verwirren und zu verhindern, dass sowohl der Filter als auch der von Ihnen festgelegte Hintergrund verwendet werden, und nur den Filter zu verwenden. Andere Browser unterstützen mehrere Hintergrundbilder und verstehen die Hintergrunddeklaration und den Filter nicht. Daher wird nur der Hintergrund verwendet.

Möglicherweise müssen Sie auch mit der sizingMethod im Filter spielen, damit sie wie gewünscht funktioniert.

Ich hatte das gleiche mit einem PNG mit Transparenz zu tun, das als Hintergrundbild eines <A> -Elements mit angewendeter Deckkraft festgelegt wurde.

Das Update bestand darin, die Hintergrundfarbe des <A> -Elements festzulegen.

Also folgendes:

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

Verwandelt sich in:

/* "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: ...;

PNG-Transparenzproblem in IE8

Dans Lösung hat bei mir funktioniert. Ich habe versucht, ein Div mit einem Hintergrundbild auszublenden. Vorsichtsmaßnahmen: Sie können das Div nicht direkt ausblenden, sondern ein Wrapper-Image ausblenden. Fügen Sie außerdem die folgenden Filter hinzu, um ein Hintergrundbild anzuwenden:

-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 */      

Bitte beachten Sie, dass die Pfade in den src-Attributen der Filter absolut und nicht relativ zum CSS-Blatt sind.

Ich fügte hinzu:

background: transparent\9;

Dies führt dazu, dass der IE meine frühere Deklaration des tatsächlichen Hintergrundbilds für die anderen Browser ignoriert.

Danke Dan !!!

Bitte versuchen Sie es mit dem folgenden 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 */   

Dan Tello Fix hat bei mir gut funktioniert.

Ein weiteres Problem, das ich bei IE8 festgestellt habe, war, dass, wenn das PNG in einem DIV mit kleineren CSS-Abmessungen für Breite oder Höhe als das PNG gehalten wurde, das Schwarzkanten-Prob erneut ausgelöst wurde.

Korrigieren Sie das CSS für Breite und Höhe oder entfernen Sie sie vollständig.

Ich verwende einen CSS-Fix anstelle von JS, um meine Ebene mit runden Ecken und transparentem PNG zu umgehen

Versuchen

.ie .whateverDivWrappingTheImage img {
Hintergrund: #ffaabb; / * Dies sollte die Hintergrundfarbe sein, die tatsächlich zu Ihrem Design passt * /
Filter: Chroma (#ffaabb); / * und dies sollte mit dem Wert übereinstimmen, den Sie in die Hintergrundfarbe eingegeben haben * /
}}

Dies erfordert möglicherweise mehr Arbeit an IE9 oder höher.

Ich möchte nur hinzufügen (da ich nach diesem Problem gegoogelt habe und diese Frage zuerst auftauchte). IE6 und andere Versionen machen die PNG-Transparenz sehr hässlich. Wenn Sie ein PNG-Bild haben, das Alpha-transparent ist (32 Bit) und es auf einem komplexen Hintergrund anzeigen möchten, können Sie dies niemals einfach im IE tun. Sie können es jedoch korrekt über einem einfarbigen Hintergrund anzeigen, solange Sie festlegen, dass das CSS-Attribut background-colorfür PNG-Bilder (oder Divs) mit dem der Eltern identisch ist background-color.

Dies macht also schwarz, wo das Bild Alpha-transparent sein sollte, und transparent, wo das Alpha-Byte 0 ist:

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

Und dies wird korrekt gerendert (beachten Sie das Hintergrundfarbenattribut im inneren Div) :

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

Eine komplexe Alternative dazu, die ein Alpha-Bild über einem komplexen Hintergrund ermöglicht, besteht darin AlphaImageLoader, ein Bild mit einer bestimmten Deckkraft zu laden und zu rendern. Dies funktioniert so lange, bis Sie diese Deckkraft ändern möchten ... Das Problem im Detail und seine Lösung (Javascript) finden Sie HIER .

Mein Szenario:

• Ich hatte ein Hintergrundbild mit einem 24-Bit-Alpha-PNG, das auf einen Ankerlink eingestellt war.
• Der Anker wurde beim Schweben mit Jquery eingeblendet.

z.B.

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

Ich fand, dass das Anwenden des von Dan Tello bereitgestellten Aufschlags nicht funktionierte.

Indem ich jedoch eine Spanne innerhalb des Ankerelements platzierte und das Hintergrundbild auf dieses Element setzte, konnte ich mit dem Markup von Dan Tello ein gutes Ergebnis erzielen.

z.B.

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