mask-size

示例(Examples)

¥Examples

填充容器(Filling the container)

¥Filling the container

使用 mask-cover 工具缩放蒙版图片直至填满蒙版层，如有需要可裁剪图片：

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

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

填充而不裁剪(Filling without cropping)

¥Filling without cropping

使用 mask-contain 工具将蒙版图片缩放至外边缘，无需裁剪或拉伸：

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

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

使用默认大小(Using the default size)

¥Using the default size

使用 mask-auto 工具以默认大小显示遮罩图片：

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

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

使用自定义值(Using a custom value)

¥Using a custom value

使用 mask-size-[<value>] 语法 根据完全自定义的值设置 mask image size：

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

对于 CSS 变量，还可以使用 mask-size-(<custom-property>) 语法：

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

这只是简写，用于 mask-size-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

在 mask-size 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。