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

滤镜 | 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 [``](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-image

设置掩码图像的掩蔽模式。见mask-mode...

设置掩码图像的位置。见mask-position...

设置掩码图像的大小。见mask-size...

repeat-style>设置掩码图像的重复。见mask-repeat...

如果只有一个值，它将两者都设置为mask-origin和mask-clip.如果两个值，则第一组mask-origin和第二组mask-clip...

| no-clip设置受掩码图像影响的区域。见mask-clip...

设置当前掩码层上使用的复合操作。见mask-composite...

形式语法

#where 
 =  ||  [ /  ]? ||  ||  || [  | no-clip ] ||  || 
where 
 = none |  |  = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]
 = [  | auto ]{1,2} | cover | contain
 = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
 =  | fill-box | stroke-box | view-box
 = add | subtract | intersect | exclude
 = alpha | luminance | match-source
where 
 =  |  |  |  |  |  =  =  |  =  | margin-box
where 
 = image( [ [  |  ]? , ? ]! )
 = image-set( # )
 = element(  )
 = cross-fade(  , ? )
 =  |  |  |  = border-box | padding-box | content-box
where 
 =  |  |  |  |  |  | currentcolor |  = [  |  ]  = ? &&  =  |  = linear-gradient( [  | to  ]? ,  )
 = repeating-linear-gradient( [  | to  ]? ,  )
 = radial-gradient( [  ||  ]? [ at  ]? ,  )
 = repeating-radial-gradient( [  ||  ]? [ at  ]? ,  )
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
 = [ left | right ] || [ top | bottom ]
 = #{2,}
 = circle | ellipse
 = closest-side | farthest-side | closest-corner | farthest-corner |  | {2}

where 
 =  |  =  | 
 = ?

实例

.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

规范

浏览器兼容性