PNG-Transparenzproblem in IE8

76

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.

user138777
quelle
9
Das Problem wird fast zweifellos dadurch verursacht, dass Sie die CSS-Deckkraft (über das Filtersystem) letztendlich auf ein PNG anwenden, was das Problem zu verursachen scheint.
Meandmycode
Haben Sie Vorschläge, wie Sie es ändern können, damit es im IE funktioniert?
user138777
1
Richtig. Verwenden Sie nicht den Opazitätsfilter (oder andere Filter), da er Artefakte einführt.
EricLaw
Ich verwende jQuery, um die Folien einzublenden. In diesem Fall muss die Deckkraft ausgeblendet werden. Im Moment wird alles mit den schwarzen Rändern angezeigt. Irgendein Weg darum herum?
Jeffrey
Könnten Sie eine Antwort akzeptieren, damit ich diese sperren kann? Diese Frage hat bereits neun gelöschte Antworten; es zieht viele "mee tooo!" und danke!" Antworten.

Antworten:

106

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.

Dan Tello
quelle
Ich hatte das gleiche Problem, aber in meinem Fall war ein weißer Hintergrund genug, um es zu umgehen. Danke für den Vorschlag
Quamis
Die Kombination mit dem AlphaImageLoader- Hack unten auf: hover hat den Trick für mich getan.
Nickb
Danke - das hat bei mir funktioniert, aber ich musste meinen Hintergrund einem anderen Element als untergeordnetes Element des ursprünglichen Elements hinzufügen, das ausgeblendet wurde. Details wurden unten hinzugefügt.
Codeinthehole
4
Beachten Sie, dass dies nur eine teilweise Korrektur zu sein scheint. Der Explorer multipliziert das transparente PNG immer noch mit Schwarz vor. Dies bedeutet, dass, wenn Sie beispielsweise einen weißen Bereich mit 50% Deckkraft (im PNG) haben und dann jede Art von Deckkraft (über CSS) auf dieses Element anwenden, Sie tatsächlich GRAU sehen (50% Weiß x) 100% schwarz) bei jeder Deckkraft, die Sie mit Ihrem CSS angegeben haben. Ich suche immer noch nach einer echten Lösung, habe aber noch keine gefunden.
Tom Auger
3
Hallo! Ich kann wissen, warum es für einige von Ihnen nicht funktioniert. In meinem Fall habe ich die Deckkraft mit jQuery animiert. Aber rate mal was! Sie können jeweils nur EINE Filterdeklaration festlegen (selbst wenn Sie viele Filter in diese "filter:" - Deklaration einfügen können). Wenn jQuery die Transparenz animiert, wird ein Filter festgelegt, der die anderen überschreibt. Lösung: Wickeln Sie Ihr Bild in ein Div. Wenden Sie den AlphaImageLoader- oder Verlaufsfilter auf das Bild an und animieren Sie die Deckkraft des Div. Voila!
Diego
9

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.

Mike Cavaliere
quelle
7

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.

Fresheyeball
quelle
5

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

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 !!!

Andrew
quelle
4

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 */   
Kevin G Flynn
quelle
2

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.

Zeniph
quelle
Dies sollte ein Kommentar zur Antwort sein und keine eigene Antwort, aber das hat mir geholfen!
Mark Fox
2

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.

Makomatisch
quelle
0

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 .

Cipi
quelle
0

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; }
Code im Loch
quelle
span sind keine Elemente auf Blockebene. Wie könnte dies funktionieren, wenn Sie nicht die Anzeige festlegen: Block und Höhe / Breite?
Brenden
@Brenden; Wenn ich mich richtig erinnere, hätte ich 'display: block' verwendet. Wenn ein Anker ein Div umschließt, besteht das Markup die Validierung nicht - daher der Grund für die Verwendung eines Span-Tags.
Codeinthehole