-webkit-mask-repeat-x
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
-webkit-mask-repeat-x 属性指定遮罩图像是否以及如何水平重复（平铺）。
语法
css
/* Keyword values */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;
/* Multiple values */
-webkit-mask-repeat-x: repeat, no-repeat, space;
/* Global values */
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: revert;
-webkit-mask-repeat-x: revert-layer;
-webkit-mask-repeat-x: unset;
值
- repeat
-
遮罩图像水平和垂直重复。
- no-repeat
-
遮罩图像不重复；只绘制一个遮罩图像副本。遮罩元素的其余内容不显示。
- repeat
-
遮罩图像水平和垂直重复。
- space
-
图像尽可能多地重复，不进行裁剪。第一个和最后一个图像固定在元素的任一侧，空白空间均匀分布在图像之间。除非只能显示一个图像而不进行裁剪，否则将忽略
mask-position属性。只有当没有足够的空间显示一个图像时，才会使用空格进行裁剪。 - round
-
随着允许空间大小的增加，重复图像将拉伸（不留间隙），直到有足够的空间添加另一个图像。当添加下一个图像时，所有当前图像都会压缩以腾出空间。示例：原始宽度为 260px 的图像，重复三次，可能会拉伸直到每次重复的宽度为 300px，然后添加另一个图像。然后它们将压缩到 225px。
正式定义
正式语法
-webkit-mask-repeat-x =
[ repeat | no-repeat | space | round ]#
示例
使用重复或不重复的遮罩图像
css
.example-one {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-x: repeat;
}
.example-two {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-x: no-repeat;
}
使用多个遮罩图像
你可以为每个蒙版图像指定不同的 <repeat-style>，用逗号分隔
css
.example-three {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-repeat-x: repeat, space;
}
每个图像都与相应的重复样式匹配，从第一个指定到最后一个。
规范
不属于任何标准。
浏览器兼容性
加载中…