티스토리 뷰

728x90
반응형

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 을 선언하여 해당 선택자를 가리키기만 하면 끝.

728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함