'알파'에 해당되는 글 1건

  1. 2007/11/23 png 파일 IE6에서 알파값 제대로 적용하기

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

크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
블로그코리아에 블UP하기
Posted by 나를찾는아이
Tag , ,
Trackback 1 Comment 0

Trackback : http://trend21c.tistory.com/trackback/292 관련글 쓰기

  1. Subject IE6에서 PNG사용하기

    Tracked from 프라키아's 코발트블루 빛 바다처럼 2007/12/16 00:41 delete

    블로그 왼쪽 상단부에 띠 배너가 걸려있지요. 보통 이런류의 이미지 파일은, 배경이 투명이라 블로그나 웹상에 보여질때 이미지바깥부분은 투명처리됩니다. 하지만 익스플로러 6.0버전에선 그냥 바로 적용되 안 되구요. 몇가지 손을 바줘야 합니다. 번거롭지만,티스토리나 태터툴즈 혹은 웹에서 사용하실때 유용한 방법 알려드립니다. 티스토리를 예로들면 HTML/CSS 편집에서 skin.html을 고쳐줍니다. 일단, PNG사용을 위해서 알파값을 적용해줘야 하는데요...

prev 1 next
openclose