CSS 크로마(Chroma) 필터란?
웹 페이지에서 특정 색상을 투명하게 처리하고 싶다면 크로마(Chroma) 필터를 사용할 수 있습니다. 이 필터는 이미지나 텍스트 요소에 적용할 수 있으며, 스크롤바에도 사용 가능해 활용 범위가 넓습니다.
크로마 필터의 매개변수
크로마 필터에서 설정할 수 있는 매개변수는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| Color | 투명하게 만들고 싶은 색상을 지정합니다. |
크로마 필터 구현 예제
아래 코드는 크로마 필터를 실제로 적용하는 방법을 보여줍니다.
<html>
<head>
</head>
<body>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)">
<p>텍스트 예시:</p>
<div style="width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>
위 예제에서는 로고 이미지의 흰색(#FFFFFF) 부분과 텍스트의 파란색(#3300FF) 부분에 각각 크로마 필터를 적용하여, 해당 색상이 화면에서 투명하게 처리되도록 했습니다. 이처럼 필터에 지정한 색상과 일치하는 영역이 모두 투명하게 바뀝니다.
브라우저 호환성 참고 사항
크로마 필터는 과거 인터넷 익스플로러(Internet Explorer)에서 지원하던 비표준 기능으로, 현재 대부분의 최신 브라우저에서는 동작하지 않습니다. 따라서 현대적인 웹 개발에서는 투명 배경을 지원하는 PNG·WebP 같은 이미지 형식을 사용하거나, CSS의 mix-blend-mode, SVG 마스크(mask) 등을 활용하는 것이 좋습니다. 레거시 환경 유지보수 시에만 이 필터를 참고하시기 바랍니다.