CSS 마스크(Mask) 필터란?
마스크 효과를 사용하면 이미지나 텍스트에서 투명한 픽셀은 지정된 색상으로 채우고, 그 반대로 불투명한 픽셀은 투명하게 전환할 수 있습니다. 원본의 실루엣만 남겨 도장을 찍은 듯한 시각 효과를 만들 때 유용하게 활용됩니다.
참고로 Mask 필터는 과거 인터넷 익스플로러(IE)에서만 동작하던 레거시 기능입니다. 크롬, 파이어폭스 등 현대 브라우저에서는 지원되지 않으므로, 최신 환경에서는 CSS의 mask-image 속성이나 SVG 마스크를 사용하는 것이 권장됩니다.
마스크 필터의 매개변수
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Color 투명 영역이 변환될 색상을 지정합니다. |
예제
아래 코드를 실행하면 마스크 효과가 실제로 어떻게 적용되는지 확인할 수 있습니다. 이미지에는 Chroma 필터와 함께 적용되었으며, 텍스트 요소에도 동일하게 마스크가 설정되어 있습니다.
<html>
<head>
</head>
<body>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>텍스트 예제:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: Mask(Color=#00FF00)">CSS Tutorials</div>
</body>
</html>
위 예제에서 #00FF00(녹색)으로 지정된 Color 값에 따라 투명 영역이 녹색으로 채워지고, 기존에 불투명했던 부분은 투명하게 바뀌는 것을 볼 수 있습니다.