[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제.

PNG투명 이미지에 animate나 opacity등의 함수를 걸 때 IE8이하의 브라우저에서

이미지 주위에 검은 찌꺼기(?)가 표현되는 현상이 발상한다.

이 때는 아래와 같이 PNG 이미지에 Transparent CSS를 적용해 주고,

Opacity의 경우 PNG 이미지를 직접 제어하지 말고, DIV부모 엘리먼트로 감싸 주어 DIV로 Opacity등의 효과를 줌으로

해결할 수 있다.

다만, IE9 이상의 브라우저에서 보여지는 정갈함 까지는 표현하기 힘들다는 점을 명심하자.

(이미지에 흰색 Outer Glow를 준 경우, 검정 Outer Glow로 표현된다.)

 

--

 

PNG이미지에 아래와 같은 CSS를 부여해 준다.

<style>

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

}

</style>

 

Opacity등의 설정을 할 경우, 이미지가 아닌, 부모 엘리먼트에 적용해준다.

<style>

div{

opacity:0;

filter:alpha(opacity=0); /*IE7~8*/

}

</style>

 

Opacity 가 0인 부모를 100%으로 animate 하는 경우

$("div").animate({ "opacity":1, "filter":"alpha(opacity=100)" });