PNG-Transparenz ist in IE8 möglich

Ich habe Probleme mit einem transparenten PNG-Bild zeigt schwarz gerasterten pixel-Artefakte, die rund um den Rand, der nicht transparente Teil des Bildes. Es funktioniert nur diese in Internet Explorer und es funktioniert nur es aus einer Javascript-Datei verwendet wird.

Hier ist, was ich Rede...
http://70.86.157.71/test/test3.htm (link mittlerweile tot)
...beachten Sie das Mädchen in der rechten unteren Ecke. Sie hat Artefakte um Sie herum in IE8 (ich habe es noch nicht getestet, die in früheren Versionen des IE, aber ich gehe davon aus, dass es wahrscheinlich nicht die gleiche). Es funktioniert perfekt in Firefox und Chrome. Das Bild geladen wird, ein Javascript-Datei zu erzeugen, den mouseover-Effekt.

Wenn Sie laden Sie das Bild ganz von selbst, es funktioniert gut.
Hier ist das Bild...
http://70.86.157.71/test/consultant2.png

Weiß jemand, wie man dieses Problem beheben?

Das Bild entstand in Photoshop CS3.

Ich habe gelesen, Dinge über das entfernen der Gama, aber das war wohl in früheren Versionen von Photoshop und wenn ich laden Sie es in TweakPNG, es muss nicht Gama.

Bitte um Hilfe!!

InformationsquelleAutor der Frage user138777 | 2009-08-09

  1. 106

    BEHOBEN!

    Ich ve wurde kämpfen mit dem selben Problem, und hatte gerade den Durchbruch! Wir haben festgestellt, dass, wenn Sie geben dem Bild eine Hintergrundfarbe oder ein Bild, die png-Datei zeigt richtig drauf. Der schwarze Rand ist Weg, aber jetzt hast du einen opaken hintergrund, und so ziemlich Niederlagen der Zweck.

    Dann erinnerte ich mich an ein par ie-filter-converter, die ich stieß. (Danke an Michael Bester). So fragte ich mich, was passieren würde, wenn ich gab mein problem pngs ie gefiltert hintergrund emuliert rgba(255,255,255,0), voll erwartet, dass es nicht funktioniert, aber kannst es 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! Goodbye schwarz, und Hallo funktionierende alpha-Kanäle im ie7 und 8. Verblassen Ihre PNG-Bilder in und out, oder animieren Sie Sie über den Bildschirm, es ist alles gut.

    InformationsquelleAutor der Antwort Dan Tello

  2. 9

    Lege ich diese in ein jQuery-plugin, um es modular (Sie liefern den transparenten 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: Es funktioniert auch, wenn Ihre Bilder hintergrund Bilder. Wenden Sie einfach die Funktion auf die div.

    InformationsquelleAutor der Antwort Mike Cavaliere

  3. 7

    Ich weiß, dieser thread war tot, einige Zeit, aber hier ist eine weitere Antwort auf die alte ie8 png-hintergrund-Problem.

    Du kannst es in CSS IE-proprietären Filter-system wie dieses:

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

    DEMO

    benötigen Sie eine blank.gif für die "erste" Bild in den hintergrund der Erklärung. Das ist einfach zu verwirren ie8 und verhindern, dass es mit Hilfe der filter und der hintergrund eingestellt haben, und nur die filter. Andere Browser unterstützen mehrere Hintergrundbilder und verstehen den hintergrund der Erklärung und nicht verstehen, die filter, also mit dem hintergrund nur.

    Möglicherweise müssen Sie auch zum spielen mit der sizingMethod in den filter, um es zu erhalten zu arbeiten, wie Sie wollen.

    InformationsquelleAutor der Antwort Fresheyeball

  4. 5

    Ich hatte das gleiche passieren, um ein PNG mit Transparenz, die festgelegt wurde, als das hintergrund-Bild von einem <A> - element mit opacity angewendet.

    Das Update war um die hintergrund-Farbe des <A> - element.

    So, die folgenden:

    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: ...;

    InformationsquelleAutor der Antwort Josh Mouch

  5. 4

    PNG Transparenz problem in IE8

    Dan die Lösung für mich gearbeitet. Ich war versucht zu verblassen, ein div mit einem Hintergrundbild. Einschränkungen: Sie können nicht ausblenden des div-direkt, nicht verblassen eine wrapper-Bild. Auch, fügen Sie den folgenden Filter für die Anwendung ein Hintergrundbild: 

    -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 sind absolut und nicht relativ zu dem css-sheet.

    Habe ich auch noch:

    background: transparent\9;

    Dies bewirkt, dass IE zu ignorieren, meine frühere Erklärung von den tatsächlichen hintergrund-Bild für die anderen Browser.

    Dank Dan!!!

    InformationsquelleAutor der Antwort Andrew

  6. 4

    versuchen Sie bitte 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 */

    InformationsquelleAutor der Antwort Kevin G Flynn

  7. 2

    Dan Tello fix funktioniert gut für mich.

    Einem zusätzlichen Problem fand ich mit IE8 war, dass, wenn die PNG-Datei wurde in ein DIV-Element mit kleineren CSS width oder height Dimensionen als die PNG dann der schwarze Rand prob war erneut ausgelöst werden.

    Korrigiert wird, die Breite und Höhe, CSS oder entfernen Sie Sie ganz fest.

    InformationsquelleAutor der Antwort zeniph

  8. 2

    Verwende ich ein CSS-Update eher als JS zu umgehen meine Runde in die enge getrieben Ebene mit transparenten PNG-innen

    Versuchen

    .dh .whateverDivWrappingTheImage img { 
background: #ffaabb; /* dies sollte die hintergrund-Farbe, passend zu Ihrem design tatsächlich */
filter: chroma(#ffaabb); /* und dies sollte mit dem übereinstimmen, was Wert, den Sie setzen in hintergrund-Farbe */
}

    Dies erfordert mehr Arbeit auf ie9 oder höher.

    InformationsquelleAutor der Antwort Macomatic

  9. 0

    Möchte nur hinzufügen (da googelte ich nach diesem problem, und diese Frage tauchte zuerst), IE6 und anderen Versionen Rendern von PNG-Transparenz sehr hässlich. Wenn Sie PNG-Bild, das ist alpha-transparent (32bit) und wollen zeigen, Sie über einige komplexe hintergrund, Sie können dies nie tun, einfach im IE. Aber Sie können richtig anzeigen über eine einzige Farbe im hintergrund, solange Sie festlegen, dass PNG-Bilder (oder divs) CSS-Attribut background-color die gleichen sein wie die Eltern background-color.

    Also das Rendern wird schwarz, wo Bild sein sollte, alpha-transparente und transparente, in denen die alpha-byte 0:

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

    Und diese werden korrekt gerendert (Hinweis: der background-color-Attribut in das innere div):

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

    Komplexe alternative zu dieser die es ermöglicht, alpha Bild über einen komplexen hintergrund ist die Verwendung AlphaImageLoader zu laden und render-Bild das gewisse Deckkraft. Das funktioniert, bis Sie Sie ändern wollen, Deckkraft... Problem im detail und Ihre Lösung (javascript) gefunden werden kann HIER.

    InformationsquelleAutor der Antwort Cipi

  10. 0

    Mein Szenario:

    • Hatte ich ein hintergrund Bild, hatte
      24bit alpha-png, die festgelegt wurde, um eine
      Anker-link.
    • Der Anker wurde
      verblasst auf hover mit Jquery.

    zB.

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

    Fand ich, dass die Anwendung der mark-up zur Verfügung gestellt von Dan Tello hat nicht funktioniert.

    Jedoch, indem Sie einen span in das anchor-element, und setzen Sie die hintergrund-Bild, dass dieses element konnte ich ein gutes Ergebnis erzielen mit Dan Tello ' s markup.

    zB.

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

    InformationsquelleAutor der Antwort codeinthehole

Schreibe einen Kommentar