it-swarm.com.de

PNG-Transparenzproblem in IE8

Ich habe Probleme mit einem transparenten PNG-Bild, das schwarz gerasterte Pixelartefakte am Rand des nicht transparenten Teils des Bildes zeigt. Dies geschieht nur im Internet Explorer und nur aus einer Javascript-Datei, in der es verwendet wird.

Hier ist, wovon ich rede ... http://70.86.157.71/test/test3.htm (Link jetzt tot) ... bemerke das Mädchen in der unteren rechten Ecke. Sie hat Artefakte in IE8 (ich habe es in früheren Versionen von IE nicht getestet, gehe aber 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 erzeugen.

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

Wie kann man 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.

76
user138777

FIXED!

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

Dann erinnerte ich mich an einen rgba to ie Filterkonverter, auf den ich stieß. (Danke an Michael Bester). Also habe ich mich gefragt, was passieren würde, wenn ich meinen Problem-PNGs einen dh gefilterten Hintergrund geben würde, der rgba (255,255,255,0) emuliert.

.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, arbeite Alphakanäle in IE7 und 8. Blende deine Pngs ein und aus oder animiere sie über den Bildschirm - alles ist gut.

106
Dan Tello

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 es sich bei Ihren Bildern um Hintergrundbilder handelt. Wende einfach die Funktion auf das div an.

9
Mike Cavaliere

Ich weiß, dass dieser Thread einige Zeit tot war, aber hier ist eine andere Antwort auf das alte IE8-PNG-Hintergrundproblem.

Sie können dies auch in CSS tun, indem Sie das firmeneigene Filtersystem von IE wie folgt verwenden:

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

DEMO

sie müssen ein leeres.gif für das 'erste' Bild in Ihrer Hintergrunddeklaration verwenden. Dies ist einfach, um ie8 zu verwirren und zu verhindern, dass sowohl der Filter als auch der Hintergrund, den Sie eingestellt haben, verwendet werden und nur der Filter. Andere Browser unterstützen mehrere Hintergrundbilder und verstehen die Hintergrunddeklaration und nicht den Filter. Daher wird nur der Hintergrund verwendet.

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

7
Fresheyeball

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

Das Problem wurde behoben, indem die Hintergrundfarbe des <A> -Elements festgelegt wurde.

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

bitte versuchen Sie es unter 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

PNG-Transparenz-Problem in IE8

Dans Lösung hat für mich funktioniert. Ich habe versucht, ein Div mit einem Hintergrundbild auszublenden. Vorsichtsmaßnahmen: Sie können das div nicht direkt ausblenden, sondern nur ein Wrapper-Image. 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 */      

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

Ich fügte hinzu:

background: transparent\9;

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

Danke Dan !!!

4
Andrew

Ich verwende einen CSS-Fix anstelle von JS, um meine runde, eckige Ebene mit transparentem PNG zu umgehen

Versuchen

. ie .whateverDivWrappingTheImage img {
 Hintergrund: #ffaabb;/* dies sollte die Hintergrundfarbe sein, die Ihrem Design entspricht */
 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 später.

2
Macomatic

Dan Tello Fix hat bei mir gut funktioniert.

Ein zusätzliches Problem, das ich im IE8 gefunden habe, war, dass, wenn die PNG in einer DIV mit kleineren CSS-Breiten- oder Höhenabmessungen als die PNG gehalten wurde, die Black Edge-Sonde erneut ausgelöst wurde.

Korrigieren Sie die Breite und Höhe CSS oder entfernen Sie sie insgesamt behoben.

2
zeniph
0
Cipi

Mein Szenario:

  • Ich hatte ein Hintergrundbild mit einem 24-Bit-Alpha-PNG, das auf einen Ankerlink gesetzt 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 einen Bereich innerhalb des Ankerelements platzierte und das Hintergrundbild auf dieses Element einstellte, konnte ich mit Dan Tellos Markup ein gutes Ergebnis erzielen.

z.B.

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