Black edges appear when jQuery changes the transparency of png images under IE8_jquery

When you use jQuery to add a show-hide animation to a picture in png24 format, you find that black edges appear in the translucent area of ​​the picture?

After searching online, there are mainly the following methods:

1. Save the image in PNG-8 format.

2. Cut in the background color and save it in JPG format.

I tried the above two methods, but it seems that the effect is not good. The png8 format will still have black edges.

Solution:

1. Don’t change the transparency of the image directly, but put a container for the image to modify the transparency of the container
2. Add a background color of a similar color to this container (very important, the key to solving the bug is this step)
Under normal circumstances, the bug is solved at this point. If you still have problems, please see below:

3. Add zoom to the container: 1
(Personally, I think this method is just a cover-up and does not fundamentally solve the problem. It seems that this is the only way for now. I look forward to a better method)

At present, the Internet has higher and higher requirements for web page effects, and it is inevitable to use PNG images. PNG is divided into several formats, PNG8, PNG24, PNG32, among which the most commonly used one, which also has moderate display effect and size, is PNG24. It supports translucency, transparency, and very rich colors. However, because most of our Chinese people use the IE series or browsers with IE as the core series, and because WINDOWS XP has a relatively large market share in the domestic market, and many people are still using XP. IE6 IE7 IE8 and other browsers, and these browsers have more or less gaps in their support for PNG. IE6 does not support PNG at all, and IE7 IE8 supports PNG incompletely. When changing the transparency of an image under IE7 IE8, PNG will not be supported. There will be a black border in the transparent area. If it is translucent, the entire translucent area will be black. This is unacceptable for pages that require beautiful appearance. After some research, I found that using PNG as the background, use Microsoft The unique filter to load images can solve the problem of IE6 not supporting PNG, and can also solve the problem of black edges when using the JQUERY animation transparency effect under IE7 and IE8. There are codes and real images, as follows

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>

Reference the jquery1.8 class library before the end tag of /body of the page, and then add the above code. There is no problem displaying PNG24 in IE6 7 8. If you need to perform animate animation or obtain pictures, you will find that in IE 6 7 8 times, the PNG image cannot be found, or there is no response after changing its position and transparency. The reason is that correctPNG replaces the IMG tags of all PNGs on the page with SPAN tags, and then uses filter: progid on the SPAN tags. :DXImageTransform.Microsoft.AlphaImageLoader loads the PNG image, so the recommended approach is to include the image in a DIV. Only one IMG tag is allowed in this DIV, and then perform position or transparency related operations on the DIV, for example:

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

Another situation is that in addition to transparency and displacement of this image, I also need to change its width and height. In this case, I recommend the following method

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

Welcome to discuss if you have any questions