滤镜 | 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 | ? | ? | ? | ? | ? | ? |