CSS 크로마 필터란?
크로마(Chroma) 필터는 이미지나 텍스트에서 지정한 특정 색상을 투명하게 처리하는 CSS 필터입니다. 주로 이미지와 함께 사용되며, 스크롤바에도 적용할 수 있습니다.
예를 들어 흰색 배경 위에 올려야 하는 로고 이미지에서 배경색(#FFFFFF)을 제거하고 싶다면, 크로마 필터로 해당 색상만 투명하게 만들어 자연스럽게 합성할 수 있습니다.
사용 예제
다음은 CSS 크로마 필터를 실제로 적용한 예제입니다.
<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>
코드 설명
- 이미지 적용:
Filter: Chroma(Color = #FFFFFF)를 통해 이미지 내부의 흰색 영역이 모두 투명하게 바뀝니다. - 텍스트 적용: 글자색과 동일한
#3300FF(파란색)를 크로마 필터로 지정하면, 해당 색상으로 그려진 텍스트 부분이 투명하게 처리됩니다.
참고 사항
크로마 필터는 과거 인터넷 익스플로러(Internet Explorer)에서 지원되던 비표준 기능으로, 현재 대부분의 최신 브라우저에서는 동작하지 않습니다. 현대 웹 개발에서는 유사한 효과를 mix-blend-mode, SVG 마스크(mask), 또는 PNG/WebP 같은 투명 배경 이미지 포맷으로 구현하는 것이 권장됩니다.