-webkit-mask-repeat-y
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
-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属性将被忽略，除非只有一个图像可以在不裁剪的情况下显示。唯一会使用空白进行裁剪的情况是没有足够的空间显示一个图像。 - round
-
随着允许的垂直空间增大，重复的图像将拉伸（不留空隙），直到有足够的空间再添加一个。当添加下一个图像时，所有当前图像都会压缩以留出空间。示例：一个原始高度为 260px 的图像，重复三次，可能会拉伸到每次重复 300px 高，然后会添加另一个图像。然后它们会压缩到 225px 高度。
正式定义
正式语法
-webkit-mask-repeat-y =
[ repeat | no-repeat | space | round ]#
示例
使用重复或不重复的蒙版图像
css
.example-one {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-y: repeat;
}
.example-two {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-y: no-repeat;
}
使用多个蒙版图像
你可以为每个蒙版图像指定不同的 <repeat-style>，用逗号分隔
css
.example-three {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-repeat-y: repeat, space;
}
每个图像都与相应的重复样式匹配，从第一个指定到最后一个。
规范
不属于任何标准。
浏览器兼容性
加载中…