본문
그럴때 아래와 같이 하시면 됩니다.
// 스타일시트 정의
<style type="text/css">
<!--
.png24 {
tmp:expression(setPng24(this));
}
-->
</style>
// 파일 표시 스크립트
<script type="text/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>
// 이미지에 class 호출
<img src="이미지경로" alt="" class="png24">
단 css 백그라운드시 적용이 되지 않으며, 이미지맵또한 지원이 안됩니다.
IE6 이하버전에서 투명 png 이미지를 지원하지 않기 때문에 사용하는 팁이며, 이미 투명 png 에 관련된 팁들은 많이 나와있습니다. 그중에 하나라고 보셔도 됩니다.
스크립트로 적용하는 방법 : http://www.webmini.net/41420
css에서 배경만으로 할시 아래와 같이 적용하시면 되겠습니다.
스타핵을 이용한 방법입니다.
* html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') }
hack 자세히 보기 : http://www.webmini.net/41334
나라디자인에서도 비슷한 팁이 올라와있습니다. 위에 팁도 같은 맥락으로 보시는게 맞을듯 합니다.
나라디자인에서는 _(언더바핵)을 사용한 경우입니다.
언더바 핵을 이용한 방법
언더바핵을 사용할경우 Win IE 4~6에서만 동작하고 그외 브라우저에서는 핵부분이 제외되서 읽혀 들이게 됩니다.
하지만 스타핵은 Win IE 4~6, Mac IE 4~5 에서 동작을 하기 때문에 그외 브라우저용으로 하나더 만들어야 하는 불편함이 있습니다. 아래를 참고하세요.
#img_png {margin-top:8px; background:url(test.png) no-repeat;} // Win IE 4~6 외 타브라우저용
* html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') } // Win IE 4~6 용
사용하시는건 본인 스스로가 판단하시되, 두핵모두 background-repeat 적용이 안되는점은 유의하시기 바랍니다.
--------------------------------------------------------------
http://www.webmini.net/44185
png 를 배경으로 할경우 익스6에서는 png를 지원하지 않기에 스타핵이나 언더바핵으로 png를 css에서 처리해주었습니다. 하지만 배경위에 텍스트나 이미지에 링크값이 들어갈경우 익스6에서 링크가 안먹히게 됩니다.
이럴경우 해당 링크 즉 png 배경위에 링크 부분에 position:relative; 를 주시면 해결됩니다.
(이미지가 겹치는 부분만 링크가 안먹힙니다.)
ex)
css 소스
* html #png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png',sizingMethod='crop'); }
<div id="#png"><a href="http://www.webmini.net/" style="position:relative;" >웹미니 바로가기</a>
위와 같이 a 태그 안에 style에 position:relative; 를 추가해주시면 됩니다.
물론 class 로 불러와도 되며, 아래와 같이 해당 id 값 a 링크부분에 정의를 해주셔도 됩니다.
#png a {position:relative;}
해당 png 안에 있는 모든 a 태그는 전부 적용이 되는 형식입니다.
익스6이 사라지는 그날까지...
관련링크
- http://www.webmini.net/43419 721회 연결
- http://www.webmini.net/19763 679회 연결
댓글목록
등록된 댓글이 없습니다.