익스플로러6에서 PNG24 투명하게 만들기

소다팝 상단 로고에 적용된 것으로(현재 개편된 홈에서는 다른 방식입니다) logo라는 div클래스에 배경으로 처리해준것입니다.작업은 그래픽툴에서 투명배경에 글자에 그림자 효과를 준 것으로 문제는 작업완료후 그래픽툴의 내보내기 설정에서&투명GIF(Alpha,Index 둘다)적용시에 그림자부분이 깨끗하게 나오질 않게 됩니다.밑배경 위에 글자 적용후 GIF나JPG로 내보내기 하면 되겠지만 만약 밑배경에 그라디언트나 기타 이미지가 적용된 밑배경일경우 위치잡기(div클래스에 위치값 적용이나 div클래스의 배경의 위치값 적용)가 난감해지기 일쑤입니다.몇가지 해결책을 찾던중 투명색 뿐만아니라 반투명색의 투과까지 지원해주는 PNG24를 적용하기로 했습니다.문제는 익스플로러6에서 배경이 회색으로 나온다는 것인데 이걸 해결할 방법이 아래와 같습니다.


1.iepngfix.htc 파일과 투명색으로 처리된 blank.gif 파일을 원하는 위치에 업로드합니다.
iepngfix.htc 파일을 열어서 blank.gif 파일의 경로를 알맞게 변경합니다.
if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif‘; <----- 이부분

2.css 파일의 원하는 class나 스타일에{behavior:url(iepngfix.htc);} 속성을 추가해줍니다(경로도 알맞게 수정)


*굉장히 좋은 잇점:배경에도 적용됩니다
*소다팝에 적용된 부분은
.logo{z-index:999;width:220px;height:90px;position:absolute;line-height:81px;background:url(../themes/type1/logo.png) bottom left;behavior:url(../themes/type1/iepngfix.htc);}
*iepngfix.htc와 blank.gif를 첨부합니다.


새로운 버전이 있습니다. 익스플로러6에서 PNG24 투명하게 만들기 2탄(호환성도 좋음)