CSS Masking - mask-repeat 属性_CSS 菜鸟教程

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 掩码重复 - 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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 掩码重复 - 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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 - 重复

以下示例演示了 -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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 - 空格

以下示例演示了 -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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 - 圆形

以下示例演示了 -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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 - 不重复

以下示例演示了 -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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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 - 双值语法

以下示例演示了 -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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('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('images/red-flower.jpg');
	 	 	 background-size: cover;
	 	 	 background-repeat: no-repeat;

	 	 	 -webkit-mask-image: url('images/shop.png'), url('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>

<< CSS Masking - mask-size 属性 CSS Masking - mask-position 属性 >>