PNG 를 Background 로 쓰자

<img> 태그를 쓴 png 이미지는 투명하게 만드는 방법은 여기 제로보드에도 쓰이고 있죠

그런데 Background 로 쓰기에는 그 스크립트가 안 통하죠.

그러나 CSS 로 쉽게 해결할수 있습니다.

뭐 아시는 분들은 이미 다 아시겠지만요 ㅎㅎ

레이아웃의 그림자 같은 경우 Background 로 지정해서 컨탠츠에 따라서 커지고 작아지고에 따라서 계속 보여지게 해야 하죠.

PNG 로 그 그림자를 지정하면 아주 깨끗하고 깔끔하게 나오기 때문에 PNG 를 쓰는게 좋죠.

아래 소스만 있으면 모든 브라우저에서 투명하게 나오게 됩니다

view plaincopy to clipboardprint? <style> <!-- #header_middle{ margin:auto; width:426px; background:url(images/box_02.png) repeat; background-position:center top; font-family:dotum; font-size:12px; padding:0px 30px 0px 30px; } * html #header_middle { background:url(images/blank.gif) no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/box_02.png", sizingMethod="scale"); } --> </style> <style> <!-- #header_middle{ margin:auto; width:426px; background:url(images/box_02.png) repeat; background-position:center top; font-family:dotum; font-size:12px; padding:0px 30px 0px 30px; } * html #header_middle { background:url(images/blank.gif) no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/box_02.png", sizingMethod="scale"); } --> </style>

나와 있는대로 div 에 id 값을 지정해주면 투명 png 로 보여집니다.

또한 IE 6 에서 투명하게 나오기 위해산 *html #header_middle 이 작동하기 위해서는

blank.gif 투명 gif 가 있어야 합니다.