滤镜 | mask (Scalable Vector Graphics) - CSS 中文开发手册
maskCSS属性通过部分或完全隐藏它改变的元件的可见性。这是通过在特定点掩蔽或裁剪图像来完成的。
/* 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: unset;
该mask速记也会重置mask-border为初始值。因此，建议使用mask速记而不是其他简写或单个属性覆盖级联中较早的任何掩码设置。这将确保mask-border已被重置以允许新样式生效。
| 初始值 | 作为简写的每个属性：mask-origin：border-box mask-clip：border-box |
|---|---|
| 适用于 | 所有元素; 在SVG中，它适用于不包含<defs>元素和所有图形元素的容器元素 |
| 遗传 | 没有 |
| 百分比 | 作为速记的每个属性：掩码位置：指的是掩码绘图区域的大小减去掩码图层的大小（参见背景位置文本） |
| 媒体 | visual |
| 计算值 | 作为速记的每个属性：mask-origin：如指定的mask-clip：所指定的那样 |
| 动画类型 | 作为简写的每个属性：掩码位置：长度，百分比或计算的简单列表的可重复列表掩码大小：简单长度，百分比或计算列表的可重复列表 |
| 规范的顺序 | 形式语法定义的独特的非模糊顺序 |
| 创建堆叠上下文 | 是 |
mask-origin*border-boxmask-clip*border-box
Applies to all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements [Inherited](inheritance) no Percentages as each of the properties of the shorthand:
mask-position：指遮罩绘画区域的大小减去遮罩层图像的大小（参见文本background-position）媒体视觉计算值作为速记的每个属性：mask-origin*具体规定mask-clip*具体规定
Animation type as each of the properties of the shorthand:
mask-position：简单的长度，百分比或计算列表的可重复列表mask-size：简单的长度，百分比或计算列表的可重复列表
Canonical order the unique non-ambiguous order defined by the formal grammar Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) yes
语法
值
<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-layer>#where
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>
where
<mask-reference> = none | <image> | <mask-source>
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<bg-size> = [ <length-percentage> | 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
where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box
where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<box> = border-box | padding-box | content-box
where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>? 实例
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
} 规范
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Module Level 1The definition of 'mask' in that specification. | Candidate Recommendation | Extends its usage to HTML elements. Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'mask' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support (for SVG, only setting the mask image) | 1.0-webkit1 | (Yes) | (Yes)2 | No support | (Yes)-webkit1 | 4.0-webkit3 |
| Applies to HTML Elements | 1.0-webkit1 | ? | 3.5 (1.9.1)1 | No support | (Yes)-webkit1 | No support |
| Shorthand for mask-* properties | 1.0-webkit1 | ? | 53.0 (53.0)4 | No support | (Yes)-webkit1 | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support (for SVG, only setting the mask image) | 2.1-webkit | (Yes) | ? | ? | ? | 3.2-webkit |
| Applies to HTML Elements | ? | ? | ? | ? | ? | ? |
| Shorthand for mask-* properties | ? | ? | ? | ? | ? | ? |