세이박스

IE6 브라우저 PNG 투명 이미지 처리 방법

웹프로그램

사용자 삽입 이미지


오늘 달인쿠폰(http://dalincoupon.com/) 커밍순 페이지를 추가하는 작업을 했습니다.
달인 김병만씨 사진을 PNG로 투명하게 가운데 보이도록 설정하고 배경이미지를 추가 했더니 IE6 브라우저에서 투명 처리 부분이 하늘색으로 보이는 것입니다.

아직은 IE6 이용자가 많다보니 그냥 놔두기엔 아닌것 같더군요.
그렇다고 Gif 파일로 투명하게 하자니 색상이 256이라 김병만씨 사진이 이상하게 되더군요.
자료를 찾아보니 역시나 답은 있더군요.

자바스크립트와 스타일 소스 조금 추가해서 해결하면 되더군요.

먼저 <head>와 </head> 사이에 다음과 같은 소스를 추가 합니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function setPng24(obj) {
 obj.width=obj.height=1;
 obj.className=obj.className.replace(/\bpng24\b/i,'');
 obj.style.filter =
 "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
 obj.src='';
 return '';
}
//-->
</script>

자바스크립트 소스는 스크립트 파일로 따로 분리 하셔도 상관 없습니다.


2. Style 소스

<style type="text/css">
.png24 {
   tmp:expression(setPng24(this));
}
</style>

Style소스 역시 Style 파일에 추가하셔도 상관 없구요.


이제 적용할 이미지에 클래스명을 지정해 줍니다.

<img src="main.png" border="0" class="png24">


그럼, 이제 정상적으로 배경이미지가 나올겁니다.

참고로, 달인쿠폰은 소셜커머스 사이트 입니다.
대박 사이트가 곧 오픈 예정입니다.




 ▶ 최신영화, 최신 미국드라마 무료 다운로드...