CSS mask-repeat 语法
在 CSS 中，mask-repeat 属性用于定义蒙版图像的重复方式。它的行为与 background-repeat 属性非常相似。
语法：
mask-repeat: 关键字;说明：
mask-repeat 的属性取值如下表所示。
| 取值 | 说明 |
|---|---|
| repeat（默认值） | 在水平和垂直两个方向同时重复 |
| repeat-x | 只在水平方向上重复 |
| repeat-y | 只在垂直方向上重复 |
| no-repeat | 不重复，仅显示一次 |
| space（不常用） | 重复图像，同时在图像之间均匀分配空隙，图像不会被裁剪（常用于美观布局） |
| round（不常用） | 重复图像，为保证整除会拉伸或压缩图像，以无空白完整填充 |
当 mask-image 属性中定义了多个蒙版图像时，mask-repeat 属性也应提供对应数量的重复样式值，并使用英文逗号分隔，这些值会按顺序应用于各个蒙版层，比如：
mask-image: url("test1.png"), url("test2.png");
mask-repeat: repeat, no-repeat; /* test1.png 重复，test2.png不重复 */注意:
- mask-repeat 属性适用于所有元素。
- 为了更好的浏览器兼容性，建议在使用时添加浏览器前缀（如 -webkit-mask-repeat），尤其是在旧版浏览器中。
CSS mask-repeat 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | repeat |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask-repeat 示例
接下来，我们通过一个简单的例子来讲解一下 CSS mask-repeat 属性是如何使用的。
示例：mask-repeat 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
margin: 50px;
/* 定义背景图片 */
background-image: url("imgs/bird.jpg");
background-size: cover;
/* 定义蒙版图片 */
mask-image: url("imgs/star.svg");
mask-repeat: no-repeat; /* 不重复 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
如果使用的是 mask-repeat: repeat;，此时页面效果如下图所示。
如果使用的是 mask-repeat: repeat-x;，此时页面效果如下图所示。
如果使用的是 mask-repeat: repeat-y;，此时页面效果如下图所示。
mask 是一个复合属性
在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
