mask
====

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:* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position` (en-US): `center`
* `mask-clip` (en-US): `border-box`
* `mask-origin` (en-US): `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `mask-position` (en-US): refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
 |
| 计算值 | 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` (en-US): 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` (en-US): as specified
* `mask-origin` (en-US): as specified
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image`: discrete
* `mask-mode`: discrete
* `mask-repeat`: discrete
* `mask-position` (en-US): a repeatable list
* `mask-clip` (en-US): discrete
* `mask-origin` (en-US): discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

Syntax
------

### Values

`<mask-reference>`

设置遮罩图片的路径。详见 `mask-image`。

`<masking-mode>`

设置遮罩图片的模式。详见 `mask-mode`。

`<position>`

设置遮罩图片的位置。详见 `mask-position` (en-US)。

`<bg-size>`

设置遮罩的大小。详见 `mask-size` (en-US)。

`<repeat-style>`

设置遮罩图片的重复性。详见 `mask-repeat`。

`<geometry-box>`

如果只有一个 <geometry-box> 值被赋予，他将会设置 `mask-origin` (en-US) 和 `mask-clip` (en-US)。如果两个 <geometry-box> 值显示，第一个值代表 `mask-origin` (en-US) 第二个值代表 `mask-clip` (en-US)。

`<geometry-box> | no-clip`

设置区域，会被遮罩图片影响。详见 `mask-clip` (en-US)。

`<compositing-operator>`

设置遮罩图层的组合操作。详见 `mask-composite` (en-US)。

### 正式语法
```

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 with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* Applying SVG effects to HTML content (en-US)
* SVG