Skip to content

IE6에서 png 투명도 사용하기

익스플로러 6이하에서는 png 이미지에 투명도가 적용되지 않습니다.

간단하게는 


 <img src="blank.gif" style="width: 100px; height: 100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />


1×1 픽셀 투명이미지를 하나 만들어서 png 이미지를 사용하고자 하는 곳에 위 소스에 이미지명과 경로를 변경해 주시면 됩니다.

그런데 png 이미지를 사용할 때마다 위 소스를 적용해야하기 때문에 번거로움이 있습니다.

위 방법 외에 스크립트나 htc를 이용하는 방법이 있는데 저는 htc 파일을 이용하는 방법을 알려 드리겠습니다.


먼저 http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html에서 pngbehavior 파일을 다운 받습니다.

압축해제 후 pngbehavior.htc 파일, blank.gif 파일 두개를 원하시는 폴더에 위치시킵니다.

pngbehavior.htc 파일을 메모장 등으로 열어 아래의var blankSrc = "blank.gif"; 중 blank.gif의 경로를 설정합니다. 


var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";


pngbehavior.htc와 blank.gif의 이미지의 경로를 지정하신다음 css에서 다음과 같이 설정합니다.


 img {behavior: url(pngbehavior.htc);}

위와 같이 설정을 해두면 일일이 png 이미지가 사용된 곳에서 필터소스를 삽입하지 않아도 됩니다.

Tag :

comments 0

leave comments

Powered by Textyle

Design & UI Develop By The RaiN Story

Admin