mask-size

示例

填充容器

使用 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.