마스크 타입
마스크 타입 (Mask Type)
SVG 마스크의 타입을 정하는 유틸리티예요. CSS의 mask-type 속성을 조절해 마스크를 알파(alpha) 또는 루미넌스(luminance) 기준으로 처리할 수 있어요.
출처: 문서
본문
클래스와 스타일
mask-type-alpha—mask-type: alpha;mask-type-luminance—mask-type: luminance;
기본 예제
mask-type-alpha와 mask-type-luminance 유틸리티를 쓰면 SVG 마스크의 타입을 제어할 수 있어요.
<svg>
<mask id="blob1" class="mask-type-alpha fill-gray-700/70">
<path d="..."></path>
</mask>
<image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
</svg>
<svg>
<mask id="blob2" class="mask-type-luminance fill-gray-700/70">
<path d="..."></path>
</mask>
<image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
</svg>
mask-type-luminance를 쓰면 SVG 마스크의 루미넌스 값이 가시성을 결정하므로, 회색(gray) 계열 색만 쓰는 것이 가장 예측 가능한 결과를 만들어요. 반면 mask-alpha에서는 SVG 마스크의 불투명도(opacity)가 마스크된 요소의 가시성을 결정해요.
반응형 디자인
mask-type 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.
<mask class="mask-type-alpha md:mask-type-luminance ...">
<!-- ... -->
</mask>
변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.