PNG-24 사용 가이드
png 이미지를 사용시 ie6에서 배경이 회색으로 보이는 현상이 있습니다.
많이 알려진 htc 로는 no-repeat 이되서 배경을 원하는 위치에 두거나 반복적인 효과를 줄수없습니다.
iepngfix.htc와 iepngfix.js 를 이용해 ie6에서도 정상적이게 보일수있게 합니다.
첨부파일
출처 : http://www.twinhelix.com/css/iepngfix/
- blank.gif - 49Byte
- iepngfix.htc - 5.1KB
- iepngfix.js - 4.2KB
ie6 이하의 버전을 위한 핵이므로 css 는 따로 해주시는게 좋습니다.
샘플1. png 이미지를 <img>로 사용
코드뷰
<style type="text/css">
#sample01 {width:200px; height:100px; background:#333;}
.png24 {behavior:url(iepngfix/iepngfix.htc)}
</style>
<div id="sample01">
<img src="img/text.png" class="png24" alt="" />
</div>
#sample01 {width:200px; height:100px; background:#333;}
.png24 {behavior:url(iepngfix/iepngfix.htc)}
</style>
<div id="sample01">
<img src="img/text.png" class="png24" alt="" />
</div>
샘플2. png 이미지를 배경으로 사용 (고정배경으로 사용시는 htc와 js 필요없이 filter를 쓰시면됩니다.)
코드뷰
<style type="text/css">
#sample02 {width:200px; height:100px; background:#ddd url(img/text.png) no-repeat;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample02 {background:#ddd; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/text.png', sizingMethod='crop');}
</style>
<![endif]-->
<div id="sample02">
</div>
#sample02 {width:200px; height:100px; background:#ddd url(img/text.png) no-repeat;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample02 {background:#ddd; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/text.png', sizingMethod='crop');}
</style>
<![endif]-->
<div id="sample02">
</div>
샘플3. png 이미지를 배경으로 반복(repeat) 또는 위치지정
코드뷰
<script type="text/javascript" src="iepngfix/iepngfix.js"></script>
<style type="text/css">
#sample03 {width:200px; height:100px; background:#ddd url(img/text.png) repeat-y;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample03 {background:#ddd url(img/text.png) repeat-y; behavior:url(iepngfix/iepngfix.htc);}
</style>
<![endif]-->
<div id="sample03">
<img src="img/text.png" class="png24" alt="" />
</div>
<style type="text/css">
#sample03 {width:200px; height:100px; background:#ddd url(img/text.png) repeat-y;}
</style>
<!--[if lt ie 7]>
<style type="text/css">
#sample03 {background:#ddd url(img/text.png) repeat-y; behavior:url(iepngfix/iepngfix.htc);}
</style>
<![endif]-->
<div id="sample03">
<img src="img/text.png" class="png24" alt="" />
</div>
