Mask size

import maskImg from "@/docs/img/mask.png"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "mask-size"; export const description = "Utilities for controlling the size of an element's mask image.";

)", "mask-size: var(\);"], ["mask-size-[\]", "mask-size: \;"], ]} />

Examples

Filling the container

Use the mask-cover utility to scale the mask image until it fills the mask layer, cropping the image if needed:

{

} {/* prettier-ignore */}

<!-- [!code classes:mask-cover] -->
<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Filling without cropping

Use the mask-contain utility to scale the mask image to the outer edges without cropping or stretching:

{

} {/* prettier-ignore */}

<!-- [!code classes:mask-contain] -->
<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Using the default size

Use the mask-auto utility to display the mask image at its default size:

{

} {/* prettier-ignore */}

<!-- [!code classes:mask-auto] -->
<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Using a custom value

Responsive design