png 파일 IE6에서 알파값 제대로 적용하기

PNG 파일의 알파값 IE6에 적용시키기

img 로 쓰인 png 이미지 파일에 알파값 적용시키기

아래의 자바스크립트 함수를 png 파일을 사용하는 문서에 선언한다.
이 함수는 png24라는 클래스명을 가진 엘리먼트에 IE의 필터를 사용하여 알파값을 적용시키는 기능을 한다.

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='about:blank;';
	return '';
}

png 파일을 사용하는 문서의 CSS에 다음을 선언한다.
우리가 위에서 선언한 setPng24함수를 실행시키는 기능을 한다.

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

사용방법

img 태그에 png24라는 클래스명을 넣어주기만 하면 끝

<img src="image.png" alt="" class="png24" />

background-image로 쓰인 png 이미지 파일에 알파값 적용시키기

특정선택자를 가리키고 아래의 속성을 정의한다

h2 {background:url('image.png') no-repeat top left;} /* 일반적인 png 파일의 background image 사용법 */
* html h2 {background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop'); /* IE6 에서 background image로 쓰인 png 파일에 필터를 적용함 */ }

사용방법

기본적으로 png파일을 CSS에서 background-image로 처리한 후 IE6에서만 적용하기 위해 IE핵인 * html 을 선언하여 해당 선택자를 가리키기만 하면 끝.