Internet Explorer 에서 PNG 사용을 하는데 보통은 PNG를 사용하더라도 투명한 색이 아닌 회색이 배경색으로 되버린다...
GIF 이미지로 하자니 깔끔한 이미지가 되지도 않고 해서 알아보니 방법이 있더라...
방법이 있긴 한데 직접 해보니 첫번째 것이 잘 되는 것으로 보인다.
== 1 ==============================================================
== 1 ==============================================================
== 1 ==============================================================
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 을 선언하여 해당 선택자를 가리키기만 하면 끝
== 2 ==============================================================
== 2 ==============================================================
== 2 ==============================================================
html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
<img src="image.png" alt="" class="png" />
---
