CSS의 마스크(Mask) 효과는 요소의 투명한 픽셀을 지정한 색상으로 채워 넣고, 반대로 불투명한 픽셀은 투명하게 전환하는 필터입니다. 이를 활용하면 이미지나 텍스트에 독특한 시각 효과를 손쉽게 적용할 수 있습니다.
마스크 필터의 매개변수
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Color 투명한 영역이 변환될 색상을 지정합니다. |
사용 예제
아래 코드를 실행하면 이미지와 텍스트에 마스크 효과가 적용되는 것을 확인할 수 있습니다.
<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>
참고 사항
위 예제에서 사용된 Mask, Chroma 필터는 Internet Explorer 전용의 레거시(구형) 기능으로, 현재 대부분의 최신 브라우저에서는 지원되지 않습니다. 크로스 브라우징이 필요한 프로젝트라면 최신 표준인 mask-image 또는 -webkit-mask-image 속성을 사용하는 것이 좋습니다.