BLOG ESPERANCA

png파일 웹에서 투명하게보이도록 설정 본문

Program/PHP

png파일 웹에서 투명하게보이도록 설정

yobuce 2010. 11. 4. 11:41

<body style="background-color:transparent"> 를 넣으면 완전한 투명프레임

아이프레임일 경우, 반투명은  
속성에 <iframe src~ allowTransparency="true"></iframe>
iframe 에 들어간 문서속에
style="filter: Alpha(Opacity=65);"  
이렇게 스타일을 넣어 줍니다.

투명한 이미지 만들기
<img src="그림파일경로" style="filter:alpha(style=2, opacity=100, finishopacity=0)">

style의 값
0은 단일
1은 선형
2는 타원
3은 직사각형의 형태로 투명도가 들어 갑니다.

opacity는 그림 투명도
기본값은 100이고 0-100까지.

finishopacity는
style 1,2,3 의 경우 불투명도에 영향을 주는데.
0~100 까지 수치조절이 가능 
====================================================================================================
<style type="text/css">
#head_background {
  background:url('<?=$g4[path]?>/image/head_bg.png') no-repeat;
}
#main_background {
  background:url('<?=$g4[path]?>/image/main_bg.png') repeat-y;
}
#tail_background {
  background:url('<?=$g4[path]?>/image/tail_bg.png') no-repeat;
}
#cooperation {
  width:800px; height:78px;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
/*** IE6을 위한 PNG 알파채널 처리 ***/
#head_background { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/image/head_bg.png', sizingMethod='scale');}
#main_background { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/image/main_bg.png', sizingMethod='scale');}
#tail_background { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?=$g4[path]?>/image/tail_bg.png', sizingMethod='scale');}
#cooperation {width:920px; height:105px;}
</style>
<![endif]--> 

=====================================================================

Internet Explorer 7부터는 알파 PNG 이미지를 지원하기때문에 상관이 없지만 대다수가 아직 Internet Explorer 6 버전을 사용하고 있기에 종종 부자연스러운 이미지를 발견할 수 있다. 스크립트와 CSS를 이용하여 알파 PNG 이미지의 투명도를 설정할 수 있다. (ex.이미지의 클래스는 png24로 지정한다.)

다음과 같이 CSS를 정의한 후에 png 이미지의 클레스를 지정해 주면 png 파일도 웹에서 출력할 수 있다.


<script language="javascript">
function setPng24(obj) {
 obj.width=obj.height=1;
 obj.className=obj.className.replace(/png24/i,'');
 obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');";
 obj.src='';
 return '';
}
</script>
<style type="text/css">
.png24 {tmp:expression(setPng24(this));}
</style>

<img src="a.png" class="png24" />


주니7 08-02-11 11:44
  
위 소스를 사용하여 페이지를 작성하였을 경우 비스타 운영체제에서 페이지를 리로드 할때마다 플래쉬가 보였다 안보였다 하는 문제가 발생한다.

이러한 문제로 익스7.0에서는 위 패치코드를 실행하지 않도록 수정하여보았다.
익스7.0에서부터는 png 파일을 패치없이 출력할 수 있으므로 7.0부터 적용되게 하였다.

function setPng24(obj) {
var request_os = window.navigator.userAgent;
var os_array = request_os.split(";");

if(os_array[1] != " MSIE 7.0") {
obj.width=obj.height=1;
obj.className=obj.className.replace(/png24/i,'');
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');";
obj.src='';
}

return '';
}

주의할점은요... 롤오버시 안됨;.... background로 설정시 안됨.. 익스플로러 에서만 보임.

이있네요... 이것말고는html에서 투명하게 하는 방법이 있을련지..모르겠군요


[출처] png 이미지 웹에서 투명배경으로 적용하기|작성자 쏘야

'Program/PHP' Related Articles more