mask
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
css
/* Keyword values */
mask: none;
/* Image values */
mask: url(mask.png); /* 使用位图来做遮罩 */
mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */
/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 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: unset;
备注：
mask 的简写会将 mask-border 设为初始值。使用 mask 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 mask-border 也会重新设置为新的效果样式。
| 初始值 | 该简写所对应的每个属性：
|
|---|---|
| 适用元素 | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | 该简写所对应的每个属性：
|
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 该简写所对应的每个属性：
|
| Creates stacking context | 是 |
Syntax
Values
<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。
正式语法
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;
}
规范
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |