jugug.net > IE에서 객체에 alpha를 주기 위해 주의할 점..

미디어로그

IE에서 객체에 alpha를 주기 위해 주의할 점..

웹 이야기/웹관련 팁 2008/05/28 15:31

객체에 alpha를 주기위해 일반 브라우저에서는 css에 opacity:0.5; 등을 사용하고 IE에서는 filter:alpha(opacity=50); 을 준다는것은 알고 있을겁니다.

여기서 주의해야 할점은 IE에서 filter를 사용할때 alpha를 주는 객체에 width든 height든 반드시 크기값을 지정해 줘야 한다는 것입니다. 그렇지 않으면 작동을 안합니다. 이것을 몰라서 잠시 해맸습니다.
예를 들어 아래와 같이 alpha_div에 너비나 높이등의 값을 안주면..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		body{background-color:#000; font-size:12px;}
		#alpha_div{padding:10px; background-color:#fff; opacity:0.5; filter:alpha(opacity=50)}
	</style>
</head>

<body>
	<div id="alpha_div">
		<b>여기가 투명해 지는 부분</b>
	</div>
</body>
</html>

결과는 아래와 같이 됩니다.

파이어폭스에서 결과

IE에서 결과

하지만 alpha_div에 너비나 높이를 주면 IE에서도 정상적으로 출력됩니다. 아래는 최소 높이를 1px를 준것입니다. min-height는 IE7이상에서만 동작하니, IE6에서는 그냥 height를 써야 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		body{background-color:#000; font-size:12px;}
		#alpha_div{padding:10px; background-color:#fff; min-height:1px; opacity:0.5; filter:alpha(opacity=50)}
	</style>
</head>

<body>
	<div id="alpha_div">
		<b>여기가 투명해 지는 부분</b>
	</div>
</body>
</html>

IE에서 제대로 된 결과

오늘 삽질 끝에 알아냈네요. 왜 크기를 지정해야 filter가 정상적으로 작동하는지 묻지 마세요. 저도 모릅니다.

보너스. 오페라에서 alpha를 주면 나오는 문제점

오페라에서 객체에 alpha를 주면 하위객체의 글자색이 다른 브라우저에 비해 옅어지고, 클리어타입이 적용되지 않습니다. (IE7에서도 글자는 흐릿해 집니다. 아마 옵션에서 클리어타입설정 때문일듯 합니다.)

Opera에서 alpha를 주면 하위 글자들은 색이 옅어지고 클리어타입적용이 안됨.

클리어타입문제해결은 모르겠고..(그냥 클리어타입 적용 안해도 상관없는 폰트를 사용하시든지..-_-) 글자가 옅어지는 문제점을 해결하려면 alpha를 줄 객체의 position을 relative나 absolute로 지정하면 됩니다.

#alpha_div{position:relative; padding:10px; background-color:#fff; height:20px; opacity:0.5; filter:alpha(opacity=50)}

position을 relative로 줬을때

왜 이런가는 묻지 마세요. 저도 삽질중에 알아낸거라 모릅니다.

'웹 이야기 > 웹관련 팁' 카테고리의 다른 글

IETester새버전이 나왔네요. (0)	2008/09/22
티스토리 스킨편집시 직접올리기가 안되는 경우 해결하는 방법 (6)	2008/07/08
IE를 버전별로 볼 수 있는 IEtester (14)	2008/06/05
IE에서 객체에 alpha를 주기 위해 주의할 점.. (0)	2008/05/28
티스토리에서 제공하는 Moving Box스킨에서 날자를 이미지로 표현하는데 문제 해결 (11)	2008/05/11
티스토리에서 최근글의 댓글갯수를 (..개의 댓글, 댓글이 없습니다.)로 표시하기. (4)	2008/03/03