CSS 中的 CSS mask-repeat 属性用于定义遮罩图像应如何在元素内重复或平铺。此属性与 mask-image 属性结合使用，后者指定用作蒙版的图像。它允许水平、垂直、沿两个轴重复图像，或者根本不重复。"
默认情况下，图像被裁剪为元素的大小，但它们可以使用圆形缩放或均匀分布空间。
属性值
repeat-x: 遮罩图像将在元素内水平重复。
repeat-y: 遮罩图像将在元素内垂直重复。
repeat: 遮罩图像将在元素内水平和垂直重复元素。
space: 蒙版图像应尽可能重复而不被剪切，任何额外的空间将在重复图像之间平均分配。
round: 蒙版图像应在元素内重复，并且重复的图像将被拉伸以适应可用空间而不被剪裁。
no-repeat: 遮罩图像不会重复。
适用范围
所有元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素。
语法
单值语法
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat; 双值语法:水平|垂直
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round; 下表显示了 mask-repeat 属性的单值语法及其等效的双值语法。
| 单个值 | 二值等价 |
|---|---|
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
| repeat | repeat repeat |
| space | space space |
| round | round round |
| no-repeat | no-repeat no-repeat |
CSS mask-repeat: repeat-x
下面的例子演示 -webkit-mask-repeat:repeat-x 属性在元素内水平重复遮罩图像 -
<html>
<head>
<style>
.mask-container {
height: 250px;
width: 350px;
background: pink;
}
.repeated-image {
height: 220px;
width: 330px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: repeat-x;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: Repeat-y
以下示例演示-webkit-mask-repeat:repeat-y 属性在元素内垂直重复遮罩图像 -
<html>
<head>
<style>
.mask-container {
height:350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: repeat-y;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: repeat
以下示例演示: webkit-mask-repeat:repeat属性在两个方向上重复遮罩图像，即在元素内水平和垂直 -
<html>
<head>
<style>
.mask-container {
height:350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: repeat;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: space
以下示例演示 -webkit-mask-repeat: space 属性重复遮罩图像，每次重复之间有空格，而不进行裁剪 -
<html>
<head>
<style>
.mask-container {
height:350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: space;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: round
以下示例演示-webkit-mask-repeat: round 属性重复遮罩图像以覆盖整个元素区域，如果需要，最后一个图像可以被剪裁 -
<html>
<head>
<style>
.mask-container {
height:350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: round;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: no-repeat
以下示例演示 -webkit-mask-repeat: no-repeat 属性可防止遮罩图像重复 -
<html>
<head>
<style>
.mask-container {
height:350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: repeat space
以下示例演示了 -webkit-mask-repeat:repeat space 属性使用空格重复遮罩图像 -
<html>
<head>
<style>
.mask-container {
height: 250px;
width: 350px;
background: pink;
}
.repeated-image {
height: 220px;
width: 330px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: repeat space;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html> CSS mask-repeat: 多个遮罩图像
以下示例演示了-webkit-mask-repeat 属性水平重复商店遮罩图像和垂直重复心形遮罩图像以覆盖整个元素区域 -
<html>
<head>
<style>
.mask-container {
height: 350px;
width: 320px;
background: pink;
}
.repeated-image {
height: 330px;
width: 300px;
padding: 10px;
background-image: url('/css/images/red-flower.jpg');
background-size: cover;
background-repeat: no-repeat;
-webkit-mask-image: url('/css/images/shop.png'), url('/css/images/heart.png');
-webkit-mask-size: 100px;
-webkit-mask-repeat: repeat-x, repeat-y;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container">
<div class="repeated-image"></div>
</div>
</body>
</html>