PNG-24를 배경으로만 사용하려는 경우의 CSS Hack.
IE6~5.5에서 PNG-24 이미지를 전경과 배경에 동시에 사용하려는 경우 예전에 포스팅 했던 ‘IE6에서 PNG-24의 투명/반투명 색을 바르게 표현하기‘ 라는 글을 참조하시면 됩니다. 그런데 전경으로는 사용하지 않고 오직 배경으로만 사용하려는 경우 저 팁을 적용하기에 불편함이 예상 됩니다. 별도의 iengfix.htc 파일과 blank.gif 파일을 요구하기 때문이죠. 하지만 PNG-24 이미지를 배경으로만 사용할 것이 확실시 된다면 굳이 저렇게 복잡하게 하지 않아도 됩니다. 이미 널리 알려진 팁인데 제 블로그에 적어두질 않아서 간단하게 포스팅 합니다. IE6~5.5 브라우저에만 대응하는 간단한 코드를 작성하고 CSS Hack으로 처리하는 방법 입니다.
PNG-24 이미지를 배경으로만 처리하려는 경우 CSS 코드를 다음과 같이 작성 하면 IE6~5.5 브라우저에서 PNG-24 배경 이미지를 정상적으로 렌더링 합니다.
.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png‘, sizingMethod=’crop’);}
filter에 적용할 이미지의 src 경로를 상대경로로 지정하는 경우 background:url과 같이 CSS 파일을 기준으로 적용하면 안됩니다. filter에 적용하는 이미지의 경로는 HTML 문서를 기준으로 설정하여야 합니다. 즉, background의 이미지와 filter에 적용하는 이미지는 같은 이미지라 할지라도 경로의 기준이 CSS와 HTML으로 각각 서로 다르므로 이점 유의하여 적용하세요.
PNG-24를 정상적으로 렌더링 하는 표준계열 브라우저(Firefox, Opera, Safari, Chrome, IE7~8)에서는 다음과 같이 작용 합니다.
.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png’, sizingMethod=’crop’);}
PNG-24를 정상적으로 렌더링 하지 못하는 IE6~5.5 브라우저에서는 다음과 같이 작용 합니다.
.selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’png24.png‘, sizingMethod=’crop’);}
언더바 ‘_’ 핵을 사용하여 IE6~5.5 브라우저에만 MS 전용 CSS Filter를 적용하는 방법입니다.
PNG-24 관련 CSS Hack 에 공통으로 발견되는 알려진 버그
이 핵 또한 다른 PNG-24 핵들과 마찬가지로 배경이미지의 배치를 원하는 곳에 할 수 없다는 것과 배경이미지의 반복이 불가능 하다는 문제가 있습니다. 배치는 기본값인 backgroun-position:left top 으로 설정이 되며 반복은 background-repeat:no-repeat 상태가 되므로 참고하세요.
IE에서는 png배경이 사용된 엘리먼트에 position:relative|absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 position:relative|absolute 속성을 함께 부여해 보세요.
왓, _ 핵은 몰랐군요…
어려운 방법으로 핵 해서 사용했었는데 ㅠㅠ
좋은 정보 감사합니다.
위의 경우는 dtd에 따라서 문제가 있을 수 있겠네요.
filter의 경우 ie의 모든 브라우저에서 지원하게 됩니다.
Xhtml이나 loose.dtd 의 경우 ie에서 background를 제거 하기 위하여 사용하신 ‘_background:none’의 부분이 ie7 이상 에서는 background가 제거 되지 않아 filter와 background가 두번 겹쳐져서 보여 지게 됩니다.
이 경우 hack을 ‘_background:none’ 이 값이 아닌 ‘*background:none’ 이 값으로 변경한다면 dtd에 영향을 받지 않고 사용할 수 있을 듯 합니다.^^
그럼 오늘도 좋은 하루 되세요~^^
아~~~~필터에 언더바를 쓰셧네요? 헐~ -_-
저건 그냥 언더바 하나 줄이는 팁으로 알아주세요 .-_-
엉엉 ㅡㅜ
꿈트리님, 코멘트 감사해요. 하지만 꿈트리님이 제안주신 ‘*’ 스타핵 방법을 사용하는 경우 IE7이 PNG를 정상적으로 출력함에도 불구하고 IE7의 배경을 제거하고 Filter를 사용하는 방법이라서 더 좋은 방법은 아니라고 생각해요. ^^; 언더바 하나 줄이자고 IE7에도 핵을 사용하기에는 IE7이 너무 억울할듯 해요. ㅎㅎ.
다른 이야기이긴 한데 ie8에서는 ie전용 속성으로만 알고있었던 filter속성이 제대로 작동하지 않고 있습니다.
ie속성을 ie에게 배신당한 기분이랄까..-_-;;
때문에 png야 어차피 ie7부터 지원 되기때문에 문제 없다지만 filter를 이용해서 opacity속성을 가능하게 했던 부분에 대해서 문제가 있지 않을까 싶네요..
제가 제안드린 코드에서 filter와 핵은 IE6~5.5 에만 적용되고 있습니다. 좌진님 뭔가 착오가 있으신게 아닌가요? 속성 앞에 ‘_’ 언더바가 있잖습니까. ㅜㅜ; 이 코드들은 IE7 이상의 브라우저들이 filter 속성을 무시하도록 작성되어 있습니다.
좌진님 역시도 저와 같은……..보고싶은 것만 보는? ㅋㅋㅋ
ㅋㅋ 댓글에 까지 _ 핵이라고 말하고 있는데 제가 못볼리 없잖아요~
저는 IE8 버그에 대해 말씀드릴려고 한겁니다. 오해마시길.. ㅎㅎ
제가 댓글 처음에 다른이야기라고 말한건 내용은 알고있고 그 IE8 버그를 말할려고 한 것 뿐입니다. ㅜㅜ 제 글도 봐주세욤~
라는 문장에서 문제가 된다고 말씀하신 부분이 정확히 무엇인가요? PNG-24 표현은 IE 7~8에서 모두 문제가 되지 않으므로 해당사항이 없고, IE 5.5~6은 filter와 핵을 이용해서 표현이 되고 다른 버전이나 다른 벤더 브라우저에서는 무시하기 때문에 이것도 전혀 문제가 없다고 생각하는데요.
마찬가지 말이였어요
그 내용은 네이버 카페같은데는 태그에 filter를 사용해서 태그내에 모든 컨텐트의 투명도를 조절하고 있는데 IE8에서는 그 부분이 적용 안되고 있어서요
결론은 IE8에서는 아직(?) filter 속성이 적용 되지 않을거라는 이야기를 해드릴려고 한거였어요…
IE8에서 반투명 효과를 표현할 때 filter를 지원 않는다면 CSS3 속성인 opacity 속성은 어떤가요? 지원 하나요? 참고로 다른 대중적 브라우저들은(FF, OP, SF, CR) opacity 속성을 벌써 지원하고 있지요.
네이버카페를 보면 filter를 지원하지 않는 브라우저들 때문에 css3속성인 opacity속성을 별도로 주고 있는데요 IE8이 opacity를 지원했다면 이 속성이 적용됐어야 했겠지만 안되고 있더라구요 그리고 IE8이 출시될때 일부 css3속성만 지원한다고 했는데 opacity는 해당사항이 없었나봅니다..
css지원에 대한 IE지원현황이 css3가 추가되면서 조금 업데이트 된거 같은데요 아래 링크 참고해보세요~^^
http://msdn.microsoft.com/en-us/library/cc351024(Vs.85).aspx
네, IE8이 확실히 Opacity를 지원하지 않는군요.
http://www.css3.info/css3-features-in-ie8/
http://www.css3.info/preview/opacity/
결국 MS에서는 다른 브라우저들과 마찬가지로 비표준 속성에 -MS- 를 붙여서 사용할 수 있도록 방법을 제공 했네요.
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
예를 들어 반투명 효과를 모든 브라우저에서 동일하게 표현하려면
#selector {opacity:0.5; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)";}이렇게 동일한 효과에 대하여 세번 선언해야 합니다.글을 읽어보니 기존에 사용하던
filter:alpha(opacity=50);방식은 약식이였나 봅니다. (그래도 7까진 잘 돌아가던데 말이죠..)
IE8에서
-ms-filter:alpha(opacity=50);로 해도 적용되지 않더라구요…
맨 아래 코드 예제를 보내 아래 코드처럼 사용해야 크로스브라우저가 가능하겠네요..
#selector {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
찬명님 덕분에 좋은정보 얻고 갑니다. ^^
확인해 보니 약식은 IE8에서 여전히 유효 합니다. 다만 -ms- 속성을 사용할 때에는 값을 “따옴표”로 감싸줘야 하네요. 고로 다음과 같이 작성하면 됩니다.
#selector {opacity:0.5; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)";}따옴표로 속성의 값을 감싸야 한다는 규칙을 좌진님 코멘트 덕분에 발겼했네요. 감사해요. ^^
쌍따옴표는 저도 먼가 했습니다 헐..
또 하나 얻어갑니다. ㅎㅎ
a 요소 뿐만 아니라
서시 제어 요소에도 이러한 핵을 쓴다면 마우스로 클릭이 안되더군요 ㅠ_ㅠ;
FF에서는 클릭으로 이동 할 수 있지만, IE에서는 Tab키로 이동해야지 블랭크가 깜빡여요 후..
아쉽게도 InternetExplorer 6.0.2900.2180.xpsp_sp2_gdr.070227-225에서 PNG 핵 때문에 브라우저가 다운되는 현상이 있습니다. 이걸로 피 본 이후로 쓰지 않고있습니다 ㅠㅠ
저런, 그런 문제가 있었어? 이걸 증명만 할 수 있다면 좋은데…
png24 파일을 익스에서 배경으로 쓸때 repeat-x 같은 반복 속성을 주려면 어떻게 해야돼나요.
위방법은 repeat 는 안돼는거 같아서요…
png24 Hack을 사용하는 모든 방법은 background-repeat 속성을 사용할 수 없습니다. 본문 하단에도 적혀 있습니다. ^^
배경의 repeat, position을 해결한 IE PNG Fix 버전이 있더군요.
아직 알파버전이지만, 테스트한 결과 별다른 문제점은 없는 것 같았습니다. 끝에 말씀하신 a 태그에 마우스가 접근 불가한 문제는 테스트 해보질 못했습니다.
XE코드에도 넣어두었습니다. 꽤 오래전에 추가했는데 아직 사용하는 분은 없어보이지만요^^;
common/js/iepngfix_tilebg.js
한 번 테스트 해주세요. :)
아이고, 링크를 안남겼네요.
http://www.twinhelix.com/css/iepngfix/
와우! 이런게 있었군요. 시간날때 테스트 해보고 포스팅 해야겠는데요. 감사합니다. 굿잡! ^^;