>
아시다시피, IE6에는 필터와 같은 비표준 스타일을 사용하지 않으면 반투명 PNG 파일을 표시 할 수없는 버그가 있습니다. IE7에서는이 문제가 해결되었습니다. 그러나 여전히 PNG 파일에 대한 버그가 있습니다. 페이딩 반투명 PNG 파일을 올바르게 표시 할 수 없습니다. 반투명 PNG 파일과 함께 jQuery에서 표시/숨기기 기능을 사용할 때 명확하게 볼 수 있습니다. 이미지의 배경이 불투명 한 검은 색으로 표시됩니다.

jQuery를 사용하여이 질문을 해결할 아이디어가 있습니까?

업데이트

내 테스트를 보자

>

보시다시피 IE8은 항상 PNG-24 이미지를 잘못 표시합니다. 또한 IE8은 페이드 (jQuery.fadeOut 함수)에서만 PNG-8 이미지를 올바르게 표시합니다. 그러나 동시에 페이드 및 크기 조정 (jQuery.hide 함수) 할 때 PNG-8 이미지가 잘못 표시됩니다.

PS. 당신은 여기 에서 내 테스트 소스 코드를 다운로드 할 수 있습니다.

감사합니다.

  • 답변 # 1

    여러분이 여전히 답을 찾고 있는지 모르겠습니다. 며칠 전에 PNG 이미지가있는 div에 애니메이션을 적용하는 것과 동일한 문제가있었습니다. 많은 솔루션을 시도했지만 제대로 작동하는 유일한 방법은 내가 직접 코딩 한 것입니다.

    이 문제는 불투명도 지원 및 적절한 PNG 지원이 부족한 IE 인 것 같습니다. 따라서 불투명도 효과를 적용한 후 PNG 표시가 중단됩니다 (애니메이션 프레임 워크는 IE의 불투명 효과를 위해 독점 MSIE 필터 "AlphaImageLoader"에 의존한다고 생각합니다). 궁금한 점은 (아직 잘 이해하지 못하는)이 문제는 애니메이션 전에 이미지를로드하기 위해 동일한 필터를 사용하여 해결할 수 있다는 것입니다.

    확장자가 .PNG 인 모든 이미지에 필터를 적용하는 간단한 자바 스크립트를 작성했습니다. 내 애니메이션은 IE에서 잘 작동합니다.

    아래 코드를 복사합니다. 프레임 워크에 독립적이지 않지만 (순수한 JavaScript) 프레임 워크의 DOM 준비 이벤트에 넣어야합니다 (또는 domready.js를 사용하십시오).

    var i;
    for (i in document.images) {
        if (document.images[i].src) {
            var imgSrc = document.images[i].src;
            if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
                document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
            }
        }
    }
    
    

    잘 작동하는지 애니메이션이 매끄럽게 실행되는지 알려주십시오. 친절합니다!

  • 답변 # 2

    HTML

      <img src="image.png" class="iefix" width="16" height="16" />
    
    

    CSS에서

    .iefix
    {
     /* IE hack */
      background:none\9; /* Targets IE only */
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
    }
    
    

    쉬운, 빠르고 좋은 :)

  • 답변 # 3

    문제의 근본 원인은 Micrsoft IE의 PNG 알파 투명도 (모든 버전의 IE)에 대한 지원이 부족한 것으로 보입니다. IE6은 알파 투과 픽셀을 옅은 파란색으로 렌더링하여 최악의 범죄자입니다. IE7 및 IE8은 PNG 알파 투명도를 처리하지만 PNG에서 알파 투명 픽셀의 불투명도 변경을 처리 할 수는 없습니다. 투명 대신 검은 색으로 렌더링됩니다.

    이 문제에 대한 내 자신의 수정은 상황에 따라 다릅니다. 몇 가지 접근법이 있습니다 :

    <올>

    GIF 만 사용하십시오. GIF는 색상 깊이가 제한되어 부드럽 지 않지만 픽셀은 완전히 투명합니다.

    여기에있는 IE PNG 수정을 사용하십시오 : http://git.twinhelix.com/cgit/iepngfix/-index.html을 열고 주석을 읽으십시오.

    동작을 애니메이션하지만 PNG 이미지의 불투명도를 애니메이션하지 않습니다.

    조건부로 JavaScript 테스트, 조건부 주석 또는 CSS에 대한 MSIE 전용 "동작"확장을 사용하여 위의 일부 또는 전부를 수행하십시오. 그 중 하나가 작동하는 방법은 다음과 같습니다.

    조건부 의견 :

    <!-- in index.html, in the <head>: -->
    <!--[if IE 6]>
    <link rel="stylesheet" src="css/ie6only.css" />
    <![endif]-->
    
    

    CSS에서 :

    /* ie6only.css */
    img { behavior: url("js/iepngfix.htc"); }
    
    

    JavaScript 감지를 통해 :

    <script defer type="text/javascript">
    if(navigator.appName == "Microsoft Internet Explorer")
    { /* Do IE-specific stuff here */ }
    else
    { /* Non-IE-compatible stuff here */ }
    </script>
    
    

    iepngfix.htc 동작은 PNG를 빈 이미지 (blank.gif)로 바꾸고 Microsoft DXImageTransform 루틴을 사용하여 PNG를 빈 이미지의 필터로로드하여 작동합니다. div 또는 span으로 물건을 감싸서 작동하는 다른 PNG 수정이 있지만 레이아웃이 깨지는 경우가 있으므로 피하십시오.

    이것이 도움이되기를 바랍니다.

  • 답변 # 4

    IE 6/7/8에서이 문제에 대한 해결책을 관리했습니다.

    거의 다음과 같습니다 :

    <div class="wrapper">
      <div class="image"></div>
    </div>
    ...
    /* I had to explicitly specify the width/height by pixel */
    .wrapper
    {
      width:100px;
      height:100px;
    }
    .image
    {
      width:100%;
      height:100%;
      background:transparent url('image.png') no-repeat;
      /* IE hack */
      background:none\9; /* Targets IE only */
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
    }
    ...
    $(".wrapper").fadeOut('slow');
    
    

    "filter"속성은 암시 적으로 IE만을 대상으로합니다.

  • 답변 # 5

    이미지를 갤러리 캐 러셀에 미리로드하기 위해이 기능을 사용했습니다. 위의 Alejandro García Iglesias의 답변을 기반으로합니다. IE 6&8에서 "black halo"를 제거했습니다.

    function preloadImages(id) {
        var c = new Array();
        $(id+' img').each( function(j) {
            c[j] = new Image();
            c[j].src = this.src;
            if ( $.browser.msie ) {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
            }
        });
    }
    
    

    다음과 같이 전화하십시오 :

    preloadImages('#Stage');
    
    

관련 자료

  • 이전 c# - 파일 또는 어셈블리 'MicrosoftReportViewerCommon, Version = 11000을로드 할 수 없습니다
  • 다음 c# - WCF 서비스를 비동기 적으로 호출하는 방법은 무엇입니까?