아래그림은 png24를 ie6에서 보여지는 차이 (오른쪽 그림뒤에 연한 회색의 배경이 들어간 것을 볼 수 있다.)
png24를 그림으로 보여줄 때 투명하게 만들기 (img src 사용)
1. <HEAD>와 </HEAD> 사이에 있는 style 태그나 css 파일에 아래 내용을 더해 줍니다.
.png24 { tmp:expression!!!(setPng24(this)); }
예) <style>
.png24 { tmp:expression!!!(setPng24(this)); }
</style>
2. 자주 쓰는 js 파일이나 <script></script> 사이에 아래 내용을 더해 줍니다.
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='';
return '';
}
예) <script language="JavaScript">
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='';
return '';
}
</script>
3. 이제 png24 그림 파일 태그마다 class="png24" 를 더해 줍니다.
예) <img src="파일이름.png" class="png24">
1. 배경이미지로 png24를 불러올때 <와 > 사이에 아래 태그를 삽입해 준다.
style="filter:progid:DXImageTransform.Microsoft.alphaimageloader(enabled=X, sizingMethod=Y, src='이미지파일 경로');"
예) <body style="filter:progid:DXImageTransform.Microsoft.alphaimageloader(enabled=true, sizingMethod=crop, src='파일이름.png');">
X : enabled 는 해당 필터를 동작시키냐 시키지 않냐를 판단하는 함수.
Y : sizingMethod 는 해당 이미지를 어떤 방식으로 불러올 것인가를 정의.
image : 이미지의 크기는 그대로 오지만 이미지를 불러오는 해당 개체의 크기 자체를 이미지크기에 강제로 맞춤.
scale : 이미지를 불러오는 개체의 크기에 맞추어서 이미지를 늘리거나 줄임.
crop : 개체크기와 이미지 크기 둘다 변화가 없음.
1. 배경이미지로 png24를 불러올때 <HEAD>와 </HEAD> 아래 태그를 삽입해 준다.
<style>
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=crop src='파일이름.png');
//이곳에 background-repeat: repeat;
// 와 같은 전체배경 스타일 소스를 추가해주면 위치나, 반복여부 설정가능
}
</style>
X : enabled 는 해당 필터를 동작시키냐 시키지 않냐를 판단하는 함수.
Y : sizingMethod 는 해당 이미지를 어떤 방식으로 불러올 것인가를 정의.
image : 이미지의 크기는 그대로 오지만 이미지를 불러오는 해당 개체의 크기 자체를 이미지크기에 강제로 맞춤.
scale : 이미지를 불러오는 개체의 크기에 맞추어서 이미지를 늘리거나 줄임.
crop : 개체크기와 이미지 크기 둘다 변화가 없음.
출철 - http://maro6016.blog.me/80143890911
