mask

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

css
/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png); /* 使用位图来做遮罩 */
mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */

/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 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 也会重新设置为新的效果样式。

初始值as each of the properties of the shorthand:
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性否
Percentagesas each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
  • mask-image: as specified, but with url values made absolute
  • mask-mode: as specified
  • mask-repeat: Consists of two keywords, one per dimension
  • mask-position: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
  • mask-clip: as specified
  • mask-origin: as specified
  • mask-size: as specified, but with relative lengths converted into absolute lengths
  • mask-composite: as specified
Animation typeas each of the properties of the shorthand:
Creates stacking contextyes

Syntax

Values

<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 = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>                

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | 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  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-box> = 
  <visual-box>  |
  margin-box    

<url> = 
  <url()>  |
  <src()>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

例子

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

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

规范

Specification
CSS Masking Module Level 1
# the-mask

浏览器兼容性

BCD tables only load in the browser

参见