Mask Composite
Mask Composite
여러 마스크 이미지가 어떻게 합성(composite)되는지(mask-composite)를 정해주는 유틸리티예요. 더하기, 빼기, 교집합, 배타합 등 합성 방식을 선택할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
mask-add |
mask-composite: add; |
mask-subtract |
mask-composite: subtract; |
mask-intersect |
mask-composite: intersect; |
mask-exclude |
mask-composite: exclude; |
예시 (Examples)
기본 예시 (Basic example)
mask-add, mask-intersect 같은 유틸리티를 사용하면 요소의 마스크들이 어떻게 서로 합쳐지는지 제어할 수 있어요.
<div class="mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
<div class="mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
반응형 디자인 (Responsive design)
mask-composite 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mask-add md:mask-subtract ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.