mask-composite
En esta página
| Clase | Propiedades CSS |
|---|---|
mask-add |
mask-composite: add; |
mask-subtract |
mask-composite: subtract; |
mask-intersect |
mask-composite: intersect; |
mask-exclude |
mask-composite: exclude; |
Examples#
Basic example#
Use utilities like mask-add and mask-intersect to control how an element's masks are combined together:
{
mask-add
mask-subtract
mask-intersect
mask-exclude
{/ prettier-ignore /}
<!-- [!code classes:mask-add,mask-subtract,mask-intersect,mask-exclude] -->
<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>