mask
====

Resumo
------

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `mask-image` (en-US): `none`
* `mask-mode` (en-US): `match-source`
* `mask-repeat` (en-US): `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`
 |
| Aplica-se a | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| Inherited | não |
| 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` (en-US))
 |
| Computed value | as each of the properties of the shorthand:* `mask-image` (en-US): as specified, but with `url` (en-US) values made absolute
* `mask-mode` (en-US): as specified
* `mask-repeat` (en-US): 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` (en-US): discrete
* `mask-mode` (en-US): discrete
* `mask-repeat` (en-US): 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 |

Sintaxe
-------


```css
/\* Palavra-Chave \*/
mask: none;

/\* Valor das Imagens \*/
mask: url(mask.png); /\* Imagem bitmap usada da máscara \*/
mask: url(masks.svg#star); /\* Elemento dentro do SVG usado como máscara \*/

/\* Valores Combinados \*/
mask: url(masks.svg#star) luminance; /\* Elemento dentro do SVG usado como máscara de luminância \*/
mask: url(masks.svg#star) 40px 20px; /\* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* Elemento dentro do SVG usado como máscara com a largura e altura de 50px \*/
mask: url(masks.svg#star) repeat-x; /\* Elemento dentro do SVG usado como máscara repedida horizontalmente \*/
mask: url(masks.svg#star) stroke-box; /\* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha \*/
mask: url(masks.svg#star) exclude; /\* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem \*/

/\* Valores Globais \*/
mask: inherit;
mask: initial;
mask: unset;
```

### Valores

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.
```

mask =   
  <mask-layer># (en-US)    
  
<mask-layer> =   
  <mask-reference>              || (en-US)  
  <position> [ (en-US) / <bg-size> ] (en-US)? (en-US)   || (en-US)  
  <repeat-style>                || (en-US)  
  <geometry-box>                || (en-US)  
  [ (en-US) <geometry-box> | (en-US) no-clip ] (en-US)  || (en-US)  
  <compositing-operator>        || (en-US)  
  <masking-mode>                  
  
<mask-reference> =   
  none           | (en-US)  
  <image>        | (en-US)  
  <mask-source>    
  
<position> =   
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US)    
  
<bg-size> =   
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)  
  cover                                      | (en-US)  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     | (en-US)  
  repeat-y                                     | (en-US)  
  [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)    
  
<geometry-box> =   
  <shape-box>  | (en-US)  
  fill-box     | (en-US)  
  stroke-box   | (en-US)  
  view-box       
  
<compositing-operator> =   
  add        | (en-US)  
  subtract   | (en-US)  
  intersect  | (en-US)  
  exclude      
  
<masking-mode> =   
  alpha         | (en-US)  
  luminance     | (en-US)  
  match-source    
  
<image> =   
  <url>       | (en-US)  
  <gradient> (en-US)    
  
<mask-source> =   
  <url>    
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
<shape-box> =   
  <visual-box>  | (en-US)  
  margin-box      
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<visual-box> =   
  content-box  | (en-US)  
  padding-box  | (en-US)  
  border-box     
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

Exemplos
--------


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

.anothertarget {
  mask: url(resources.svg#c1);
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `clip-path` (en-US), `filter` (en-US)
* Aplicanto efeitos SVG no conteúdo HTML (en-US)
* SVG