-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;
}
每個影像都與相應的重複樣式匹配，從第一個指定到最後一個。
規範
不屬於任何標準。
瀏覽器相容性
載入中…