Shine your spell on me : 반투명 png 사용하기

1. AlphaImageLoader와 expression을 이용한 방법

img

자바스크립트에 함수

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='./img/blank.gif'; // 1*1픽셀의 투명한 blank.gif 이미지가 반드시 존재해야 한다.
return '';
}

를 만들고

CSS에

.png24 {tmp:expression(setPng24(this));}

라는 클래스를 만들어서 해당 img 요소 자체에 class로 사용한다.

제대로 표현되지 않을 경우, 자바스크립트 setPng24 함수에서 blank.gif의 경로를 절대경로로 넣는다.

background

해당 CSS에

background: url("/img/bg_box.png") no-repeat 0 0;
_background: none;
_filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="/img/bg_box.png", sizingMethod="images");

와 같이 사용한다.
제대로 표현되지 않을 경우, 이미지 경로를 절대경로로 넣는다.

※ IE6에서 주의할 점

png24를 사용한 img 요소 자체에 padding이나 border를 넣을 수가 없다. (blank.gif 파일의 사이즈를 기준으로 padding이나 border가 적용된다.)
AlphaImageLoader를 적용한 요소에 width나 height값을 주더라도 png이미지 사이즈에 맞춰져 변형될 수 있으며, AlphaImageLoader를 적용한 요소에 width나 height값이 없을 경우 표현되지 않을 수 있다.
나라디자인 블로그에서 알게 된 사실인데, width나 height가 들어가야 하는 것이 아니라, hasLayout 속성이 없을 경우에 표현되지 않는 것이므로 zoom:1 같은 hasLayout을 만들어 주는 속성을 추가 해도 된다.
hasLayout을 만들어주는 속성들은 On having layout — the concept of hasLayout in IE/Win 에서 참고한다.
부모 요소가 png배경일 경우, a요소에 마우스로 접근할 수 없는 현상이 있는데, a요소에 position: relative를 주면 해결 할 수 있다.
png배경을 사용한 요소에 position: relative, position: absolute 등의 position 값이 들어가면 a요소에 position: relative 를 해주어도 a요소에 접근할 수 없는 문제가 해결되지 않는다.
배경이미지 반복은 안되지만 배경이미지를 요소 크기많큼 늘려서 표현하는 scale옵션이 존재한다.

2. iepngfix.htc를 이용하는 방법

htc.zip

(1) iepngfix.htc 파일에서 IEPNGFix.blankImg 나 var blankImg 등의 blank.gif 파일 경로를 실제 파일 경로로 수정한다.
(2) 원하는 class에 behavior:url(./htc/iepngfix.htc); 속성을 넣는데, iepngfix.htc 경로를 실제 파일 경로로 수정한다.

※ IE6에서 주의할 점

img 요소 자체에 padding이 들어가면 png 이미지의 사이즈가 의도치않게 늘어나버린다.
html페이지를 모두 로딩한 후에 실행되는지, 처음에 png의 회색 배경이 잠깐 보였다가 그 후에 정상적으로 보여질 수 있다.
배경이미지를 반복할수도 없고 크기를 늘릴 수도 없다.