-webkit-mask-repeat-x

**非标准：**此功能是非标准的，不在标准化轨道上。请勿在面向 Web 的生产站点上使用它：它不适用于所有用户。实现之间也可能存在较大的不兼容性，并且将来行为可能会发生变化。

-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属性将被忽略。使用 space 进行剪裁的唯一情况是当没有足够的空間显示一个图像时。
round: 随着允许空间大小的增加，重复的图像将拉伸（不留任何间隙），直到有空间添加另一个图像。添加下一个图像时，所有当前图像都会压缩以腾出空间。例如：一个原始宽度为 260 像素的图像，重复三次，可能会拉伸到每个重复为 300 像素宽，然后会添加另一个图像。然后它们将压缩到 225 像素。

正式定义

初始值	`repeat`
适用于	所有元素
继承	no
计算值	如指定
动画类型	discrete

正式语法

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

示例

使用重复或不重复的掩码图像

css

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

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

使用多个掩码图像

可以为每个掩码图像指定不同的<repeat-style>，用逗号隔开

css

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

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

规范

不属于任何标准。

浏览器兼容性

BCD 表格只在浏览器中加载

另请参见

-webkit-mask-repeat, -webkit-mask-repeat-y