PNG 이미지의 배경 투명화
최근에 코딩하고 있는 홈페이지에 어쩔 수 없이 PNG 이미지 파일을 백그라운드로 사용할 수 밖에 없는 상황이 있었습니다..
별 문제 아닐거라고 생각하고 시작했었는데 가장 많은 어려움을 느끼게 한 부분이었습니다.
이곳 저곳을 찾아보기도 질문을 올려보기도...
그래서 알아낸 정보들...
1. JavaScript을 통한 이미지 투명화 시키기 (관련페이지 이동)
2. <!--[if IE]><![endif]--> 을 이용해서 IE에서만 적용되는 스타일 따로 정의해주기
3. 비헤이버와 CSS의 조합으로 투명화 시키기 (관련페이지 이동)
.
.
.
등이 있었지만 접근성의 문제로 그나마 원하는 결과값을 제일 잘 보여준 2번을 택하기로 했습니다.
2번을 사용하는 방법은 간단합니다.
<style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
위 소스는 IE가 아닌 다른 브라우저에서 처리할 부분으로 background 이미지 처리방법은 일반적으로 알고 있는 방법과 동일!
<style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
<!--[if IE]>
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/01kr/100test/img/common/bg_left_top_logo01.png',sizingMethod='scale'); }
</style>
<![endif]-->
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
<!--[if IE]>
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/01kr/100test/img/common/bg_left_top_logo01.png',sizingMethod='scale'); }
</style>
<![endif]-->
위 소스는 <!--[if IE]><![endif]-->을 이용한 IE 브라우저에서 PNG 이미지의 투명화를 필터로 처리한 방법입니다.
좀 더 설명하자면 "<!--[if IE]><![endif]-->"은 IE 브라우저에서만 적용되도록 해주는 소스코드입니다.
filter 속성 역시 IE에서만 적용됩니다.
위 방법으로 하면 PNG 이미지의 배경 투명화는 간단히 해결됩니다.
"<!--[if IE]><![endif]-->" 방법은 꼭 <head></head> 사이에 정의가 되어야 합니다.
<link> 태그를 넣어서 사용해도 문제 없이 적용됩니다..
하지만 이 방법에도 버그는 있습니다.
<div id="T_L">
<form><input></form>
</div>
<form><input></form>
</div>
위와 같이 투명한 PNG 이미지를 백그라운드로 사용한 레이어(div)에서는 form, input 등이 마우스로 선택이 되지 않습니다. (단, 키보드의 탭키로 이동 가능)
-----------------------------------------------------------------------------------
그래서 결과적으로 어쩔 수 없이 위와 같은 부분은 <div><img></div> 방식으로 PNG 이미지 파일을 투명화 패치를 따로 해줄 수 밖에 없었습니다.
IE 7 버전에서는 PNG를 잘 적용시켜준다고하니.....
Trackbacks1
-
CSS 디자인 :: 어스프바 디자인
두번째로 CSS를 이용해서 디자인을 한 사이트.이 사이트를 제작함으로써 CSS에 대한 활용을 좀 더 자유롭게 할 수 있게 되었다.또한 이 사이트를 제작하면서 파이어폭스. 그리고 최근에 나온 MS InternetExplorer 7, 그리고 IE 6에서 모두 제대로 사이트 이용이 가능하도록 웹표준을 지켜 제작하려고 노력했으나 꽤 많은 노가다가 필요했다.알파 채널이용이 가능한 PNG 이미지 지원문제, DIV 반투명 설정이 가능한 마이크로소프트필터(MS 에..
Comments0 total comments, leave your comment or trackback.
Categories
Recent Entries
Recent Comments
Trackbacks
Favorite Tags
Copyright 2009 elex. All rights reserved.