Schwarze Ränder erscheinen, wenn jQuery die Transparenz von PNG-Bildern unter IE8_jquery ändert

Wenn Sie mit jQuery eine Show-Hide-Animation zu einem Bild im PNG24-Format hinzufügen, stellen Sie fest, dass im durchscheinenden Bereich des Bildes schwarze Ränder erscheinen?

Nach der Online-Suche gibt es hauptsächlich die folgenden Methoden:

1. Speichern Sie das Bild im PNG-8-Format.

2. Schneiden Sie die Hintergrundfarbe aus und speichern Sie sie im JPG-Format.

Ich habe die beiden oben genannten Methoden ausprobiert, aber es scheint, dass der Effekt nicht gut ist. Das PNG8-Format hat immer noch schwarze Ränder.

Lösung:

1. Ändern Sie nicht direkt die Transparenz des Bildes, sondern fügen Sie einen Container für das Bild ein, um die Transparenz des Containers zu ändern
2. Fügen Sie diesem Container eine Hintergrundfarbe ähnlicher Farbe hinzu (sehr wichtig, der Schlüssel zur Lösung des Fehlers ist dieser Schritt)
Unter normalen Umständen ist der Fehler an dieser Stelle behoben. Wenn weiterhin Probleme auftreten, lesen Sie bitte unten nach:

3. Zoom zum Container hinzufügen: 1
(Ich persönlich denke, dass diese Methode nur eine Vertuschung ist und das Problem nicht grundsätzlich löst. Es scheint, dass dies vorerst die einzige Möglichkeit ist. Ich freue mich auf eine bessere Methode)

Gegenwärtig werden im Internet immer höhere Anforderungen an Webseiteneffekte gestellt, und es ist unvermeidlich, PNG-Bilder zu verwenden. PNG ist in mehrere Formate unterteilt: PNG8, PNG24, PNG32, darunter das am häufigsten verwendete hat einen mäßigen Anzeigeeffekt und eine moderate Größe und ist PNG24. Es unterstützt jedoch Transluzenz, Transparenz und sehr satte Farben, da die meisten unserer Chinesen die IE-Serie oder Browser mit IE als Kernserie verwenden und weil WINDOWS XP relativ groß ist Marktanteil auf dem heimischen Markt, und viele Leute verwenden immer noch IE6 IE7 IE8 und andere Browser, und diese Browser haben mehr oder weniger Lücken in ihrer Unterstützung für PNG. IE6 unterstützt PNG überhaupt nicht, und IE7 IE8 unterstützt PNG nur unvollständig . Beim Ändern der Transparenz eines Bildes unter IE7 IE8 wird kein schwarzer Rand im transparenten Bereich angezeigt. Dies ist für Seiten, die eine schöne Darstellung erfordern, nicht akzeptabel Nach einigen Recherchen habe ich herausgefunden, dass die Verwendung von PNG als Hintergrund den einzigartigen Filter von Microsoft zum Laden von Bildern verwenden kann, um das Problem zu lösen, dass IE6 PNG nicht unterstützt, und auch das Problem der schwarzen Kanten bei Verwendung des JQUERY-Animationstransparenzeffekts lösen kann IE7 und IE8. Es gibt Codes und echte Bilder wie folgt

Javascript-Code

<script>
function correctPNG() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters)) {
    var lee_i = 0;
    var docimgs=document.images;
    for (var j = 0; j < docimgs.length; j++) {
      var img = docimgs[j]
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
        lee_i++;
        var SpanID = img.id || 'ra_png_' + lee_i.toString();
        var imgData = new Image();
        imgData.proData = SpanID;
        imgData.onload = function () {
          $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
        }
        imgData.src = img.src;
        var imgID = "id='" + SpanID + "' ";
        var imgClass = (img.className) &#63; "class='" + img.className + "' " : ""
        var imgTitle = (img.title) &#63; "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
        var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
        img.outerHTML = strNewHTML;
        j = j - 1;
      }
    }
  }
}
//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
  window.attachEvent("onload", correctPNG);
}
</script>

Referenzieren Sie vor dem End-Tag von /body der Seite auf die Klassenbibliothek jquery1.8 und fügen Sie dann den obigen Code hinzu. Es gibt kein Problem bei der Anzeige von PNG24 in IE6 7 8. Wenn Sie animierte Animationen durchführen oder Bilder abrufen müssen, Sie werden feststellen, dass das PNG-Bild in IE 6 7 8 Mal nicht gefunden werden kann oder nach dem Ändern seiner Position und Transparenz keine Reaktion erfolgt. Der Grund dafür ist, dass CorrectPNG die IMG-Tags aller PNGs auf der Seite durch SPAN-Tags ersetzt Verwendet dann filter: progid für die SPAN-Tags. :DXImageTransform.Microsoft.AlphaImageLoader lädt das PNG-Bild. Daher ist die empfohlene Vorgehensweise, das Bild in ein DIV aufzunehmen. In diesem DIV ist nur ein IMG-Tag zulässig, und dann wird die Position oder Transparenz ausgeführt verwandte Operationen auf dem DIV, zum Beispiel:

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

Eine andere Situation ist, dass ich zusätzlich zur Transparenz und Verschiebung dieses Bildes auch seine Breite und Höhe ändern muss. In diesem Fall empfehle ich die folgende Methode

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

Wenn Sie Fragen haben, können Sie gerne darüber diskutieren