관리 메뉴

I LOVE EJ

Internet Explorer 6 - IE6 (익스플로러) PNG 이미지 투명처리 본문

Web publishing/웹 표준

Internet Explorer 6 - IE6 (익스플로러) PNG 이미지 투명처리

BeOne 2009. 11. 6. 14:55
IE6에서  PNG 이미지의 알파값이 제대로 표현이 되지않아 투명 부분이 뿌옇게 출력되어 보기가 민망하다. 다음 압축파일을 다운로드 받아 blank.gif, iepngfix.htc을 가져가서 사용하기 바란다.

 

ie6png.rar

ie6png.rar 파일을 압축해제하면 다음 4개의 파일을 볼 수 있다.

blank.gif
iepngfix.htc
index.html
sample.png

위의 파일중 실제로 필요한 파일은 blank.gif, iepngfix.htc 파일 두 가지다. index.html, sample.png 파일은 샘플파일이다.

 

IE6에서 PNG 투명처리를 위해서는 두 가지만 설정해주면 된다. 먼저 CSS 정의 부분이다.

<style type="text/css">
        img { behavior: url(iepngfix.htc); }
</style>

다음은 iepngfix.htc 파일 14번째 라인에 있는 blank.gif 경로를 설정한다.

 var blankImg = "blank.gif";

※ iepngfix.htc 파일과 blank.gif 이미지의 경로를 수정하고 싶으면 위와 같은 방법으로 수정을 하면 되겠다.

 

 

이번에는 PNG 이미지를 백그라운드로 설정하는 방법이다. 배경으로 사용할 부분에 다음과 같이 CSS를 정의한다.

<style type="text/css">
        *.sample  {
                behavior  : url(iepngfix.htc);
                background: url(sample.png);
        }
</style>

<div class="sample">PNG 이미지 배경으로 사용할 부분</div>