遮罩尺寸

示例

填充容器

使用 mask-cover 工具类来缩放遮罩图像直到填满遮罩层，必要时裁剪图像：

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

填充但不裁剪

使用 mask-contain 工具类将遮罩图像缩放到外边缘，但不进行裁剪或拉伸：

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

使用默认尺寸

使用 mask-auto 工具类以默认尺寸显示遮罩图像：

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

使用自定义值

Use the mask-size-[<value>] syntax to set the 遮罩图像尺寸 based on a completely custom value:

<div class="mask-size-[auto_100px] ...">  <!-- ... --></div>

For CSS variables, you can also use the mask-size-(<custom-property>) syntax:

<div class="mask-size-(--my-mask-size) ...">  <!-- ... --></div>

This is just a shorthand for mask-size-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a mask-size utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="mask-auto md:mask-contain ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.