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’);}

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

     

    Posted by 부니기