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>

使用自定义值

使用 mask-size-[<值>] 语法 来设置蒙版图像尺寸基于完全自定义的值

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

对于 CSS 变量，您也可以使用 mask-size-(<自定义属性>) 语法

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

这只是 mask-size-[var(<自定义属性>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

前缀将 mask-size 实用工具 与断点变体（如 md:）一起使用，以便仅在中等 屏幕尺寸及以上尺寸应用该实用工具

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

在变体文档中了解更多关于使用变体的信息。