png 파일 IE6에서 알파값 제대로 적용하기
2007/11/23 00:57
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 을 선언하여 해당 선택자를 가리키기만 하면 끝.
