IE6 이하버전에서 투명 png 이미지를 지원하지 않기 때문에 사용하는 팁이며, 이미 투명 png 에 관련된 팁들은 많이 나와있습니다. 그중에 하나라고 보셔도 됩니다.
스크립트로 적용하는 방법 : http://www.webmini.net/341
css에서 배경만으로 할시 아래와 같이 적용하시면 되겠습니다.
스타핵을 이용한 방법입니다.
*html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') }
hack 자세히 보기 : http://www.webmini.net/322
나라디자인에서도 비슷한 팁이 올라와있습니다. 위에 팁도 같은 맥락으로 보시는게 맞을듯 합니다.
나라디자인에서는 _(언더바핵)을 사용한 경우입니다.
언더바 핵을 이용한 방법
언더바핵을 사용할경우 Win IE 4~6에서만 동작하고 그외 브라우저에서는 핵부분이 제외되서 읽혀 들이게 됩니다.
하지만 스타핵은 Win IE 4~6, Mac IE 4~5 에서 동작을 하기 때문에 그외 브라우저용으로 하나더 만들어야 하는 불편함이 있습니다. 아래를 참고하세요.
#img_png {margin-top:8px; background:url(test.png) no-repeat;} // Win IE 4~6 외 타브라우저용
*html #img_png {margin-top:8px;background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='crop') } // Win IE 4~6 용
사용하시는건 본인 스스로가 판단하시되, 두핵모두 background-repeat 적용이 안되는점은 유의하시기 바랍니다.
'팁공유 > CSS' 카테고리의 다른 글
| [CSS]css로 장난치기 (0) | 2009/01/06 |
|---|---|
| [CSS]png 이미지로 상하좌우 유동적인 둥근박스 만들기 (0) | 2008/11/19 |
| [CSS]png 투명이미지 css에서 배경 적용하기 (0) | 2008/11/13 |
| [CSS]강제 줄바꿈 word-break:break-all; (0) | 2008/09/22 |
| [CSS]iframe대신 div를 응용해보자 (0) | 2008/09/21 |
| [CSS]프린트 (인쇄) 할때 다음 페이지 넘기기 (0) | 2008/09/21 |
http://blog.webmini.net/trackback/419
-
투명 png 이미지를 background 이미지 적용법...
2008/11/18 11:02 Tracked from HTML문서로 이어지는 Web세상 삭제뭐 워낙에 유명한
댓글을 달아 주세요