png파일 투명하게 만들기
http://blog.naver.com/prettyjii/100037708588
들어가면있는 소스들 ↓
한때 GIF파일을 웹에서 자주 사용했었다.
바로 투명(transparency)을 지원했기 때문이다.
그런데 저작권과 관련하여 여기저기에서 말들이 많이 나와
PNG라는 새로운 형식이 나왔다.
반갑게도 점차 많은 웹편집기에서 사용하는 이미지로 jpg, gif 외에 png를
지원하고 있다.
알파채널이 포함된 png24 형식은 모질라 파이어폭스에서는
제대로 보이는데 인터넷익스플로러에서는 불투명하게 보여
사용자의 의도대로 웹에 보이지 않는다. 익스플로러7에서는
제대로 보인다고 한다.
익스플로러5나 익스플로러6에서도 제대로 보이게 하는 방법이다.
1. <head>와 </head>사이에 다음 스크립트를 삽입한다.
<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>
2. <head>와 </head> 사이에 다음의 스타일을 정의한다.
<style type="text/css">
.png24 {
tmp:expression
}
</style>
3. 표시하고자 하는 png 이미지의 링크에 다음을 추가한다.
<img src="./images/dap_100.png" class="png24">
------------<-이걸 삽입(class="png24")
'Story > html/css' 카테고리의 다른 글
| div 에서 폭에 따라 텍스트 길이 조정하기 (0) | 2011.11.15 |
|---|---|
| 레이어에서 스크롤바 나타나도록 ff , ie (0) | 2011.11.15 |
| css 를 이용한 tab 메뉴 (0) | 2011.11.15 |
| span 의 폭을 일정하게 만들어줄때 ie 에선 적용되나 mozila 계열에서 안될경우 (0) | 2011.11.15 |
| 고정된 위치에 따라다니는 레이어 (0) | 2011.11.15 |