面具重复 | mask-repeat

这是一种实验技术

由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。

css的mask-repeat属性定义了mask image是否重复以及如何重复。一个遮罩图片可以水平或垂直重复，或者纵横，或者不重复。

/* 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: unset;

默认情况下，重复的图片会被剪切为图片的大小，但他们可以缩放适应（使用形状）或者从端到端的均匀分布（使用空间）

语法

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

值

<repeat-style>单值语法是整个双值语法的缩写：

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直行为。以下是每个选项如何适用于任何一个方向的解释：

形式语法

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

实例

单值

CSS内容

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: repeat; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

多重掩模图像支持

您可以指定不同的<repeat-style>对于每个掩码图像，用逗号分隔：

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

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

规范

浏览器兼容性