Tepi hitam muncul apabila jQuery menukar ketelusan imej png di bawah IE8_jquery

Apabila anda menggunakan jQuery untuk menambah animasi show-hide pada gambar dalam format png24, anda mendapati bahawa tepi hitam muncul di kawasan lut sinar gambar?

Selepas mencari dalam talian, terdapat kaedah berikut:

1. Simpan imej dalam format PNG-8.

2. Potong dalam warna latar belakang dan simpan dalam format JPG.

Saya telah mencuba dua kaedah di atas, tetapi nampaknya kesannya tidak baik Format png8 masih akan mempunyai tepi hitam.

Penyelesaian:

1 Jangan tukar ketelusan imej secara langsung, tetapi letakkan bekas untuk imej untuk mengubah suai ketelusan bekas
2. Tambahkan warna latar belakang warna yang serupa pada bekas ini (sangat penting, kunci untuk menyelesaikan pepijat ialah langkah ini)
Dalam keadaan biasa, pepijat diselesaikan pada ketika ini Jika anda masih menghadapi masalah, sila lihat di bawah:

3. Tambahkan zum pada bekas: 1
(Secara peribadi, saya rasa kaedah ini hanyalah penutupan dan tidak menyelesaikan masalah secara asasnya. Nampaknya ini satu-satunya cara buat masa ini. Saya menantikan kaedah yang lebih baik)

Pada masa ini, Internet mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk kesan halaman web, dan tidak dapat dielakkan untuk menggunakan imej PNG dibahagikan kepada beberapa format, PNG8, PNG24, PNG32, antaranya yang paling biasa digunakan, yang juga. mempunyai kesan dan saiz paparan yang sederhana, ialah PNG24 Ia menyokong ketelusan, ketelusan dan warna yang sangat kaya, bagaimanapun, kerana kebanyakan orang Cina kami menggunakan siri IE atau pelayar dengan IE sebagai siri teras, dan kerana WINDOWS XP mempunyai yang agak besar. bahagian pasaran dalam pasaran domestik, dan ramai orang masih menggunakan XP IE6 IE7 IE8 dan penyemak imbas lain, dan pelayar ini mempunyai lebih kurang jurang dalam sokongan mereka untuk PNG dan IE7 IE8 tidak menyokong PNG sepenuhnya . Apabila menukar ketelusan imej di bawah IE7 IE8, PNG tidak akan disokong dalam kawasan lutsinar penampilan Selepas beberapa penyelidikan, saya mendapati bahawa menggunakan PNG sebagai latar belakang, gunakan penapis unik Microsoft untuk memuatkan imej boleh menyelesaikan masalah IE6 tidak menyokong PNG, dan juga boleh menyelesaikan masalah tepi hitam apabila menggunakan kesan ketelusan animasi JQUERY di bawah. IE7 dan IE8 Terdapat kod dan imej sebenar, seperti berikut

Kod JavaScript

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

Rujuk perpustakaan kelas jquery1.8 sebelum teg akhir /body halaman, dan kemudian tambah kod di atas Tiada masalah memaparkan PNG24 dalam IE6 7 8. Jika anda perlu melakukan animasi animasi atau mendapatkan gambar, anda akan mendapati bahawa dalam IE 6 7 8 kali, imej PNG tidak dapat ditemui, atau tiada respons selepas menukar kedudukan dan ketelusannya. Sebabnya correctPNG menggantikan teg IMG semua PNG pada halaman dengan teg SPAN, dan kemudian menggunakan penapis: progid pada teg SPAN :DXImageTransform.Microsoft.AlphaImageLoader memuatkan imej PNG, jadi pendekatan yang disyorkan adalah untuk memasukkan imej dalam DIV Hanya satu teg IMG dibenarkan dalam DIV ini, dan kemudian melakukan kedudukan atau ketelusan operasi berkaitan pada DIV, contohnya:

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

Situasi lain ialah sebagai tambahan kepada ketelusan dan anjakan imej ini, saya juga perlu menukar lebar dan ketinggiannya Dalam kes ini, saya mengesyorkan kaedah berikut

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

Selamat datang untuk berbincang jika anda mempunyai sebarang pertanyaan