IE8의 PNG 투명성 문제

IE8의 PNG 투명성 문제

---

이미지의 투명하지 않은 부분 가장자리 주변에 검은 색 디더링 된 픽셀 아티팩트를 보여주는 투명한 PNG 이미지에 문제가 있습니다. Internet Explorer에서만이 작업을 수행하고 사용되는 Javascript 파일에서만 수행합니다.

여기 제가 말하는 내용이 있습니다 ... http://70.86.157.71/test/test3.htm(지금은 링크가 끊어졌습니다) ... 오른쪽 하단에있는 소녀를 주목하세요. 그녀는 IE8에서 주변에 아티팩트를 가지고 있습니다 (이전 버전의 IE에서 테스트하지는 않았지만 아마 동일하다고 가정합니다). Firefox와 Chrome에서 완벽하게 작동합니다. 이미지는 자바 스크립트 파일에서로드되어 마우스 오버 효과를 생성합니다.

이미지를 모두로드하면 제대로 작동합니다. 여기 이미지가 있습니다 ...http://70.86.157.71/test/consultant2.png

이 문제를 해결하는 방법?

이미지는 Photoshop CS3에서 제작되었습니다.

Gama 제거에 대한 내용을 읽었지만 이전 버전의 Photoshop에 있었던 것으로 보이며 TweakPNG에서로드하면 Gama가 없습니다.

---

결정된!

나는 똑같은 문제로 씨름하고 있었고, 방금 돌파구를 가졌습니다! 이미지에 배경색이나 이미지를 제공하면 PNG가 그 위에 제대로 표시되도록 설정했습니다. 검은 색 테두리는 사라졌지 만 이제는 불투명 한 배경이 생겼으며 이는 목적을 거의 무효화합니다.

그런 다음 rgba to ie 필터 변환기를 기억했습니다. (Michael Bester에게 감사드립니다). 그래서 내 문제 png에 rgba (255,255,255,0)를 에뮬레이트하는 필터링 된 배경을 주면 어떻게 될지 궁금했지만, 작동하지 않을 것으로 기대했지만 어쨌든 시도해 보겠습니다.

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

프레스토 악장! 안녕히 계십시오. ie7 및 8에서 작동하는 알파 채널은 안녕히 계십시오. png를 안팎으로 페이드하거나 화면 전체에 애니메이션을 적용하십시오. 모두 좋습니다.

---

더 모듈화하기 위해 jQuery 플러그인에 넣었습니다 (투명한 gif를 제공합니다).

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

용법:

$('.my-selector').pngFix();

참고 : 이미지가 배경 이미지 인 경우에도 작동합니다. div에 함수를 적용하기 만하면됩니다.

---

이 스레드가 한동안 죽었다는 것을 알고 있지만 여기에 이전 ie8 png 배경 문제에 대한 또 다른 답변이 있습니다.

다음과 같이 IE의 독점적 인 필터링 시스템을 사용하여 CSS에서 할 수 있습니다.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

데모

배경 선언의 '첫 번째'이미지에는 blank.gif를 사용해야합니다. 이것은 단순히 ie8을 혼동하고 설정 한 필터와 배경을 모두 사용하지 못하게하고 필터 만 사용하는 것입니다. 다른 브라우저는 여러 배경 이미지를 지원하고 배경 선언을 이해하고 필터를 이해하지 못하므로 배경 만 사용합니다.

또한 필터에서 sizingMethod를 사용하여 원하는 방식으로 작동하도록해야 할 수도 있습니다.

---

불투명도가 적용된 <A> 요소의 배경 이미지로 설정된 투명도가 적용된 PNG에서도 동일한 일이 발생했습니다.

수정 사항은 <A> 요소의 배경색을 설정하는 것이 었습니다.

따라서 다음과 같습니다.

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

다음으로 바뀝니다.

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

---

IE8의 PNG 투명성 프롬 블렘

Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */      

Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.

I also added:

background: transparent\9;

This causes IE to ignore my earlier declaration of the actual background image for the other browsers.

Thanks Dan!!!

---

please try below code.

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   

---

Dan Tello fix worked well for me.

One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.

Correcting the width and height CSS or removing them altogether fixed.

---

I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside

Try

.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}

This may require more work on ie9 or later.

---

Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.

So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

And this will render correctly (note the background-color attribute in the inner div):

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.

---

My scenario:

• I had a background image that had a 24bit alpha png that was set to an anchor link.
• The anchor was being faded in on hover using Jquery.

eg.

a.button { background-image: url(this.png; }

I found that applying the mark-up provided by Dan Tello didn't work.

However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.

eg.

a.button span { background-image: url(this.png; }

참고URL : https://stackoverflow.com/questions/1251416/png-transparency-issue-in-ie8