-webkit-mask-repeat-y

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产网站上使用它：它不会对所有用户起作用。实现之间也可能存在很大的不兼容性，并且行为在将来可能会发生变化。

-webkit-mask-repeat-y 属性设置遮罩图像是否以及如何垂直重复（平铺）。

语法

css

/* Keyword values */
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/* Multiple values */
-webkit-mask-repeat-y: repeat, no-repeat, space;

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

值

repeat: 遮罩图像垂直重复。
no-repeat: 遮罩图像不会垂直重复；仅在垂直方向上绘制遮罩图像的一个副本。遮罩元素内容的垂直剩余部分不会显示。
repeat: 遮罩图像垂直重复。
space: 图像尽可能重复，不会剪切。第一个和最后一个图像固定在元素的顶部和底部边缘，并且空白均匀分布在图像之间。除非只有一个图像可以在不剪切的情况下显示，否则 mask-position 属性将被忽略。使用 space 时唯一发生剪切的情况是，没有足够的空间显示一个图像。
round: 随着允许的垂直空间大小的增加，重复的图像将拉伸（不留间隙），直到有空间添加另一个图像。当添加下一个图像时，所有当前图像都会压缩以腾出空间。示例：一个原始高度为 260px 的图像，重复三次，可能会拉伸到每个重复的高度为 300px，然后将添加另一个图像。然后它们将压缩到 225px 的高度。

正式定义

初始值	`repeat`
应用于	所有元素
继承	否
计算值	对于 `<length>` 绝对值，否则为百分比
动画类型	离散

正式语法

-webkit-mask-repeat-y =
  repeat | no-repeat | space | round

示例

使用重复或不重复的遮罩图像

css

.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}

使用多个遮罩图像

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

css

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

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

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

-webkit-mask-repeat, -webkit-mask-repeat-x