CSS mask-repeat 屬性

定義和用法

mask-repeat 屬性設置遮罩圖像是否/如何重復。

默認情況下，遮罩圖像在垂直和水平方向上都會重復。

實例

例子 1

使用 mask-repeat: no-repeat; 和 mask-repeat: repeat;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

親自試一試

例子 2

使用 mask-repeat: round; 和 mask-repeat: space;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

親自試一試

例子 3

使用 mask-repeat: repeat-x; 和 mask-repeat: repeat-y;：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

親自試一試

CSS 語法

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

屬性值

值 描述
repeat

遮罩圖像在垂直和水平方向上都會重復。

如果最后一張圖像不合適，它會被裁剪。

這是默認值。
repeat-x 遮罩圖像僅在水平方向上重復。
repeat-y 遮罩圖像僅在垂直方向上重復。
space

遮罩圖像會盡可能多地重復而不裁剪。

第一張和最后一張圖像分別固定在元素的兩側，圖像之間的空白均勻分布。
round 遮罩圖像會重復，并被壓縮或拉伸以填滿空間（無間隙）。
no-repeat 遮罩圖像不重復。圖像只會顯示一次。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： repeat
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 1
JavaScript 語法： object.style.maskRepeat="no-repeat"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相關頁面

教程：CSS 遮罩

參考：CSS mask 屬性

參考：CSS mask-clip 屬性

參考：CSS mask-composite 屬性

參考：CSS mask-image 屬性

參考：CSS mask-mode 屬性

參考：CSS mask-origin 屬性

參考：CSS mask-position 屬性

參考：CSS mask-size 屬性

參考：CSS mask-type 屬性