Mask Mode
Mask Mode
요소 마스크의 모드(mask-mode)를 정해주는 유틸리티예요. 알파 채널(alpha)을 쓸지, 휘도(luminance)를 쓸지, 마스크 소스에 맞춰 자동 결정할지(pattern)를 선택할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
mask-alpha |
mask-mode: alpha; |
mask-luminance |
mask-mode: luminance; |
mask-match |
mask-mode: match-source; |
예시 (Examples)
기본 예시 (Basic example)
mask-alpha, mask-luminance, mask-match 유틸리티를 사용하면 요소 마스크의 모드를 제어할 수 있어요.
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>
mask-luminance를 사용할 때는 마스크의 휘도 값이 가시성을 결정하므로, 회색조(grayscale) 색상을 사용하면 가장 예측 가능한 결과를 얻을 수 있어요. mask-alpha에서는 마스크의 불투명도가 마스킹된 요소의 가시성을 결정해요.
반응형 디자인 (Responsive design)
mask-mode 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mask-alpha md:mask-luminance ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.