jQuery가 IE8_jquery에서 png 이미지의 투명도를 변경할 때 검은색 가장자리가 나타납니다.

jQuery를 사용하여 png24 형식의 사진에 숨기기 표시 애니메이션을 추가할 때 사진의 반투명 영역에 검은색 가장자리가 나타나는 것을 발견하셨나요?

온라인으로 검색한 후 주로 다음과 같은 방법이 있습니다.

1. 이미지를 PNG-8 형식으로 저장합니다.

2. 배경색을 잘라서 JPG 형식으로 저장합니다.

위 두 가지 방법을 시도해 보았는데 효과가 좋지 않은 것 같습니다. png8 형식에서는 여전히 검은색 가장자리가 나타납니다.

해결책:

1. 이미지의 투명도를 직접 변경하지 말고 이미지가 들어갈 컨테이너를 넣어서 컨테이너의 투명도를 수정하세요
2. 이 컨테이너에 비슷한 색상의 배경색을 추가합니다. (매우 중요합니다. 버그 해결의 핵심은 이 단계입니다.)
일반적인 상황에서는 이 시점에서 버그가 해결됩니다. 여전히 문제가 있는 경우 아래를 참조하세요.

3. 컨테이너에 확대/축소 추가: 1
(개인적으로 이 방법은 은폐일 뿐 근본적으로 문제가 해결되지는 않는다고 생각합니다. 현재로서는 이 방법밖에 없는 것 같습니다. 더 좋은 방법을 기대하겠습니다)

현재 인터넷에서는 웹 페이지 효과에 대한 요구 사항이 점점 더 높아져 PNG 이미지를 사용하는 것이 불가피해졌습니다. PNG는 PNG8, PNG24, PNG32 등 여러 형식으로 나뉘며 그중 가장 일반적으로 사용되는 형식도 있습니다. 적당한 디스플레이 효과와 크기를 가지고 있으며, 반투명도, 투명도, 매우 풍부한 색상을 지원합니다. 그러나 대부분의 중국 사람들은 IE 시리즈나 IE를 핵심 시리즈로 사용하는 브라우저와 WINDOWS XP의 용량이 상대적으로 크기 때문입니다. 국내 시장 점유율은 여전히 ​​높으며 많은 사람들이 IE6 IE7 IE8 및 기타 브라우저를 사용하고 있으며 이러한 브라우저는 PNG 지원에 다소 차이가 있으며 IE7 IE8은 PNG를 불완전하게 지원합니다. .IE7 IE8에서 이미지의 투명도를 변경하면 투명 영역에 검은색 테두리가 표시됩니다. 반투명한 경우 전체 반투명 영역이 검은색으로 표시됩니다. 조사 결과 PNG를 배경으로 사용하고 Microsoft를 사용하여 이미지를 로드하면 PNG를 지원하지 않는 IE6의 문제를 해결할 수 있으며 JQUERY 애니메이션 투명도 효과를 사용할 때 검은색 가장자리 문제도 해결할 수 있습니다. IE7과 IE8에는 다음과 같은 코드와 실제 이미지가 있습니다

자바스크립트 코드

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

페이지의 /body 끝 태그 앞에 jquery1.8 클래스 라이브러리를 참조한 후 위 코드를 추가하세요. IE6 7 8에서는 PNG24를 표시하는 데 문제가 없습니다. 애니메이션을 실행하거나 사진을 가져와야 하는 경우 IE 6 7 8번에서 PNG 이미지를 찾을 수 없거나 위치와 투명도를 변경한 후 응답이 없다는 것을 알 수 있습니다. 그 이유는 올바른PNG가 페이지에 있는 모든 PNG의 IMG 태그를 SPAN 태그로 대체하기 때문입니다. 그런 다음 SPAN 태그에 필터: progid를 사용합니다. :DXImageTransform.Microsoft.AlphaImageLoader는 PNG 이미지를 로드하므로 이 DIV에는 하나의 IMG 태그만 허용되는 방식이 권장됩니다. DIV 관련 작업(예:

)

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

또 다른 상황은 이 이미지의 투명도와 변위 외에도 너비와 높이도 변경해야 한다는 것입니다. 이 경우 다음 방법을 권장합니다

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

궁금한 점이 있으면 언제든지 토론해 주세요