mask
mask CSS 简写属性 通过在特定点遮罩或裁剪图像来隐藏元素（部分或全部）。
注意：除了下面列出的属性外，mask 简写还将 mask-border 重置为其初始值。因此，建议使用 mask 简写而不是其他简写或单个属性来覆盖级联中较早的任何遮罩设置。这将确保 mask-border 也已重置，以允许新的样式生效。
构成属性
此属性是以下 CSS 属性的简写
语法
css
/* Keyword values */
mask: none;
/* Image values */
mask: url(mask.png); /* Pixel image used as mask */
mask: url(masks.svg#star); /* Element within SVG graphic used as mask */
/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url(masks.svg#star) 0 0/50px 50px; /* Element within SVG graphic used as mask with a width and height of 50px */
mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
/* Global values */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;
/* Multiple masks */
mask:
url(masks.svg#star) left / 16px repeat-y,
/* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */
url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */
值
<mask-reference>-
设置遮罩图像源。请参阅
mask-image。 <masking-mode>-
设置遮罩图像的遮罩模式。请参阅
mask-mode。 <position>-
设置遮罩图像的位置。请参阅
mask-position。 <bg-size>-
设置遮罩图像的大小。请参阅
mask-size。 <repeat-style>-
设置遮罩图像的重复。请参阅
mask-repeat。 <geometry-box>-
如果只给出一个
<geometry-box>值，则它会同时设置mask-origin和mask-clip。如果存在两个<geometry-box>值，则第一个设置mask-origin，第二个设置mask-clip。 <geometry-box> | no-clip-
设置受遮罩图像影响的区域。请参阅
mask-clip。 <compositing-operator>-
设置当前遮罩层上使用的合成操作。请参阅
mask-composite。
正式定义
| 初始值 | 与简写属性的每个属性相同
|
|---|---|
| 应用于 | 所有元素；在 SVG 中，它应用于容器元素，不包括 <defs> 元素和所有图形元素 |
| 继承 | 否 |
| 百分比 | 与简写属性的每个属性相同
|
| 计算值 | 与简写属性的每个属性相同
|
| 动画类型 | 与简写属性的每个属性相同
|
| 创建堆叠上下文 | 是 |
正式语法
mask =
<mask-layer>#
<mask-layer> =
<mask-reference> ||
<position> [ / <bg-size> ]? ||
<repeat-style> ||
<geometry-box> ||
[ <geometry-box> | no-clip ] ||
<compositing-operator> ||
<masking-mode>
<mask-reference> =
none |
<image> |
<mask-source>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<compositing-operator> =
add |
subtract |
intersect |
exclude
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<length-percentage> =
<length> |
<percentage>
<shape-box> =
<visual-box> |
margin-box
<url> =
<url()> |
<src()>
<visual-box> =
content-box |
padding-box |
border-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
示例
蒙版图像
css
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
规范
| 规范 |
|---|
| CSS 蒙版模块级别 1 # the-mask |
浏览器兼容性
BCD 表格仅在浏览器中加载