mask-repeat

mask-repeat

用于控制元素遮罩图像重复的 Utilities。

类名样式

mask-repeat

mask-repeat: repeat;

mask-no-repeat

mask-repeat: no-repeat;

mask-repeat-x

mask-repeat: repeat-x;

mask-repeat-y

mask-repeat: repeat-y;

mask-repeat-space

mask-repeat: space;

mask-repeat-round

mask-repeat: round;

示例

使用 mask-repeat utility 在垂直和水平方向重复遮罩图像

<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-repeat-x utility 仅在水平方向重复遮罩图像

<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

使用 mask-repeat-y utility 仅在垂直方向重复遮罩图像

<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

使用 mask-repeat-space utility 在不裁剪的情况下重复遮罩图像

<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-repeat-round utility 在不裁剪的情况下重复遮罩图像，并在需要时拉伸以避免间隙

<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-no-repeat utility 防止遮罩图像重复

<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

前缀a mask-repeat utility 带有断点变体，例如 md:，仅在以下情况下应用 utility中等屏幕尺寸及以上

<div class="mask-repeat md:mask-repeat-x ...">
  <!-- ... -->
</div>

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