面具重复 | mask-repeat
mask-repeat
这是一种实验技术
由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
css的mask-repeat属性定义了mask image是否重复以及如何重复。一个遮罩图片可以水平或垂直重复，或者纵横，或者不重复。
/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
/* Multiple values */
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;
/* Global values */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: unset;
默认情况下，重复的图片会被剪切为图片的大小，但他们可以缩放适应（使用形状）或者从端到端的均匀分布（使用空间）
| Initial value | repeat |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited | no |
| Media | visual |
| Computed value | Consists of two keywords, one per dimension |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
一个或多个<repeat-style>值，用逗号分隔。
值
<repeat-style>单值语法是整个双值语法的缩写：
| Single value | Two-value equivalent |
|---|---|
| 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 |
在双值语法中，第一个值表示水平重复行为，第二个值表示垂直行为。以下是每个选项如何适用于任何一个方向的解释：
| repeat | 图像重复尽可能多地覆盖整个面具绘画区域。如果不适合，最后的图像将被裁剪。 |
|---|---|
| space | 图像尽可能重复，而不削减。第一张和最后一张图片被固定在元素的任一侧，图片之间的空白均匀分布。mask-position属性被忽略，除非只有一个图像可以不经过剪裁而被显示。使用空间进行裁剪的唯一情况是当没有足够的空间来显示一个图像时。 |
| round | 随着允许的空间尺寸增加，重复的图像将延伸（不留空隙），直到有另一个空间被添加。当添加下一个图像时，所有当前的图像压缩以留出空间。例如：重复三次原始宽度为260px的图像可能会延伸到每个重复宽度为300px，然后再添加另一个图像。他们将压缩到225px。 |
| 图像不重复（因此面具绘画区域不一定会被完全覆盖）。非重复掩码图像的位置由掩码位置CSS属性定义。 |
形式语法
<repeat-style>#where
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
实例
单值
CSS内容
#masked {
width: 250px;
height: 250px;
background: blue linear-gradient(red, blue
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg
mask-repeat: repeat; /* Can be changed in the live sample */
margin-bottom: 10px;
}
多重掩模图像支持
您可以指定不同的<repeat-style>对于每个掩码图像，用逗号分隔：
.examplethree {
mask-image: url('mask1.png'), url('mask2.png'
mask-repeat: repeat-x, repeat-y;
}
每个图像与相应的重复样式相匹配，从第一次指定到最后一次。
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Module Level 1The definition of 'mask-repeat' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0-webkit | 53.0 (53.0) | ? | ? | 4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1-webkit | 53.0 (53.0) | ? | ? | 3.2-webkit |
