滤镜 | mask (Scalable Vector Graphics) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

滤镜 | 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-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;
}

规范

浏览器兼容性

  CSS 中文开发手册

标签：box,易站,clip,url,SVG,mask,Scalable,掩码
来源： https://www.cnblogs.com/breakyizhan/p/13222152.html