mask-origin
En esta página
"Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content.";
| Clase | Propiedades CSS |
|---|---|
mask-origin-border |
mask-origin: border-box; |
mask-origin-padding |
mask-origin: padding-box; |
mask-origin-content |
mask-origin: content-box; |
mask-origin-fill |
mask-origin: fill-box; |
mask-origin-stroke |
mask-origin: stroke-box; |
mask-origin-view |
mask-origin: view-box; |
Examples#
Basic example#
Use utilities like mask-origin-border, mask-origin-padding, and mask-origin-content to control where an element's mask is rendered:
{
mask-origin-border
mask-origin-padding
mask-origin-content
{/ prettier-ignore /}
<!-- [!code classes:mask-origin-border,mask-origin-padding,mask-origin-content] -->
<div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>