익스6 png배경을 위한 스타핵

익스6 png배경을 위한 스타핵(별핵) 

익스 6에서 png를 사용하면 투명한 부분이 회색으로 나온다. 

구글에서는 익스 6을 버렸지만  국내에서는 아직 익스6을 무시할 수 없다.

스타핵의 사용법은 다음과 같다.

.trans_layer{width:800px; height:100px; background:url('labg.png') repeat left top; }

 * html .trans_layer {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='labg.png',sizingMethod='scale'); }

스타핵을 사용하면 익스6에서도 동일하게 png를 사용할 수 있다. 주의할 점은 png배경을 준 클래스 다음에 스타핵을 추가해야 한다.

또한 이경우 익스 6에서 png배경이 깔린 부분만큼 a,input등이 먹지 않는 버그가 발생하는데, position:relative를 a,input등에 먹이면 해결된다.

가끔 무슨이유인지 relative를 먹여도 해결되지 않을 경우가 있는데 이때에는 a등이 있는 것을 div등으로 묶어서 absolute로 png배경위에 레이어로 띄우면 해결된다..(

png스크립트 방법

<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');" 
    return ''; 
} 
</script>

.png24 {tmp:expression(setPng24(this))} 

<img src="이미지경로.png" class="png24" alt="" />

png배경삽입방법 

 

 ie6png.zip