인터넷 익스플로러 8에서 이미지 회색조 필터 적용 시 PNG 주변에 검은 테두리가 생기는 문제 해결 방법

IE8에서 그레이스케일 필터가 제대로 작동하지 않는 이유

인터넷 익스플로러 8(IE8)에서 이미지에 회색조(grayscale) 효과를 적용하려고 할 때, 필터를 여러 번 나누어 선언하면 의도대로 동작하지 않거나 PNG 이미지 주변에 검은색이 나타나는 문제가 발생할 수 있습니다.

핵심은 적용해야 할 모든 필터를 하나의 filter 호출 안에 함께 작성하는 것입니다.

올바른 필터 선언 방식

회색조 효과를 위한 BasicImage 필터는 다음과 같이 사용합니다.

progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

CSS 예시 코드

아래와 같이 -ms-filter 속성 하나에 그라디언트 필터와 BasicImage 필터를 함께 묶어 선언하면 문제를 해결할 수 있습니다.

.demo {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE8 */
    zoom: 1;
}

코드 설명

• -ms-filter: IE8 전용 CSS 속성으로, 여러 개의 Microsoft 필터를 하나의 문자열에 연결하여 지정합니다.
• gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF): 알파 값이 00(완전 투명)인 흰색 그라디언트로, 배경을 투명하게 유지해 줍니다.
• BasicImage(grayscale=1): 요소에 회색조 효과를 적용합니다.
• zoom: 1; hasLayout을 활성화하여 IE에서 필터가 올바르게 렌더링되도록 돕습니다.

이처럼 필터를 하나의 호출로 통합하고 배경을 투명하게 처리하면, IE8 환경에서도 PNG 이미지 주변의 검은색 없이 자연스러운 회색조 효과를 구현할 수 있습니다.