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 속성을 함께 부여해 보세요.
의견을 달아 주세요