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 属性