码农教程 - 一技在手,衣食无忧! tools

目录

CSS mask-repeat 属性

❮上一节 完整的CSS参考 下一节❯

示例

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

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 50%;
  mask-size: 50%;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个mask-repeat属性设置是否/如何重复蒙版图片。

默认情况下，蒙版图片在垂直和水平方向上重复。

默认值： 重复
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.maskRepeat="no-repeat"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

-webkit- 后面的数字指定使用前缀的第一个版本。

Property
mask-repeat 4.0 -webkit- 79.0 -webkit- 53.0 3.1 -webkit- 15.0 -webkit-

CSS 语法

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

属性值

Value Description
repeat The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x The mask image is repeated only horizontally
repeat-y The mask image is repeated only vertically
space The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round The mask image is repeated and squished or stretched to fill the space (no gaps)
no-repeat The mask image is not repeated. The image will only be shown once
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

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

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 30%;
  mask-size: 30%;
  -webkit-mask-repeat: space;
  mask-repeat: space;
}
亲自试一试 »

示例

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

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

.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 30%;
  mask-size: 30%;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}
亲自试一试 »

相关页面

CSS 参考：掩模图片属性

CSS 参考：掩码模式属性

CSS 参考：掩码起源属性

CSS 参考：掩模位置属性

CSS 参考：掩模尺寸属性

CSS教程：CSS 屏蔽


❮上一节 完整的CSS参考 下一节❯