mask-repeat

基线 2023

新可用

自 2023 年 12 月起，此功能可在最新的设备和浏览器版本上运行。此功能可能无法在旧版设备或浏览器上运行。

**mask-repeat** CSS 属性设置蒙版图像的重复方式。蒙版图像可以在水平轴、垂直轴、两个轴上重复，或者根本不重复。

默认情况下，重复的图像会被裁剪到元素的大小，但它们可以缩放以适应（使用 round）或从头到尾均匀分布（使用 space）。

语法

css
/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* Multiple values */
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

/* Global values */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;

一个或多个用逗号分隔的 <repeat-style> 值。

值

<repeat-style>

单值语法是完整双值语法的简写

单值 双值等效
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直行为。以下是每个选项在任一方向上的工作原理说明

repeat 图像会根据需要重复，以覆盖整个蒙版绘制区域。如果图像不适合，则最后一个图像会被裁剪。
space 图像会尽可能重复，而不会裁剪。第一个和最后一个图像固定在元素的两侧，空白区域均匀分布在图像之间。除非只能显示一个图像而不裁剪，否则 mask-position 属性会被忽略。使用 space 发生裁剪的唯一情况是，没有足够的空间显示一个图像。
round 随着可用空间大小的增加，重复的图像会拉伸（不留空隙），直到有空间添加另一个图像。添加下一个图像时，所有当前图像都会压缩以腾出空间。例如：一个原始宽度为 260px 的图像重复三次，可能会拉伸直到每个重复的宽度为 300px，然后会添加另一个图像。然后它们会压缩到 225px。
no-repeat 图像不会重复（因此蒙版绘制区域不一定完全覆盖）。非重复蒙版图像的位置由 mask-position CSS 属性定义。

正式定义

初始值repeat
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括 <defs> 元素和所有图形元素
继承否
计算值由两个关键词组成，每个维度一个
动画类型离散的

正式语法

mask-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

示例

设置单个蒙版的重复

支持多个蒙版图像

您可以为每个蒙版图像指定不同的<repeat-style>，用逗号分隔

css
.examplethree {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}

每个图像都与相应的重复样式匹配，从第一个指定的到最后一个。

规范

规范
CSS 蒙版模块级别 1
# the-mask-repeat

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅