CSS参考手册
可缩放矢量图形 | Scalable Vector Graphics
滤镜 | mask
mask
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: 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-box
-
mask-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 |
? |
? |
? |
? |
? |
? |
可缩放矢量图形 | Scalable Vector Graphics相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。