-webkit-mask
============

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad `-webkit-mask` es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. `-webkit-mask` puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: `-webkit-mask-image`, `-webkit-mask-repeat`, `-webkit-mask-attachment`, `-webkit-mask-position`, `-webkit-mask-origin`, y `-webkit-mask-clip`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `mask-image`: `none`
* `mask-mode` (en-US): `match-source`
* `mask-repeat`: `repeat`
* `mask-position`: `center`
* `mask-clip`: `border-box`
* `mask-origin`: `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| Heredable | no |
| Percentages | as each of the properties of the shorthand:* `mask-position`: refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
 |
| Valor calculado | as each of the properties of the shorthand:* `mask-image`: as specified, but with `url` values made absolute
* `mask-mode` (en-US): como se especifica
* `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`: como se especifica
* `mask-origin`: como se especifica
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): como se especifica
 |
| Animation type | as each of the properties of the shorthand:* `mask-image`: discrete
* `mask-mode` (en-US): discrete
* `mask-repeat`: discrete
* `mask-position`: a repeatable list
* `mask-clip`: discrete
* `mask-origin`: discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

Síntaxis
--------


```css
/\* Palabras clave valor \*/
-webkit-mask: none;

/\* Valores de imágene \*/
-webkit-mask: url(mask.png); /\* Imagen de pixel usado coo máscara \*/
-webkit-mask: url(masks.svg#star); /\* Elemento dentro de un gráfico SVG usado como máscara \*/
-webkit-mask: linear-gradient(
  transparent,
  black
); /\* Gradiente usado como máscara \*/

/\* Valores combinados \*/
-webkit-mask: url(masks.svg#star) 40px 20px; /\* Elemento dentro de un gráfico SVG usado como máscara y posicionado 40px desde la parte superior y 20px a la izquierda \*/
-webkit-mask: url(masks.svg#star) 0 0/50px 50px; /\* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px \*/
-webkit-mask: url(masks.svg#star) repeat-x; /\* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente \*/
-webkit-mask: url(masks.svg#star) border; /\* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde \*/
-webkit-mask: url(masks.svg#star) text; /\* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene \*/

/\* Valores globales \*/
-webkit-mask: inherit;
-webkit-mask: initial;
-webkit-mask: unset;
```

### Valores

mask-image

*Requierido*.Ver `-webkit-mask-image`.

mask-repeat

*Opcional*. Ver `-webkit-mask-repeat`.

mask-attachment

*Opcional* Ver `-webkit-mask-attachment`.

mask-position

*Opcional*. Ver `-webkit-mask-position`.

mask-origin

*Opcional*. Ver `-webkit-mask-origin`.

mask-clip

*Opcional* Ver `-webkit-mask-clip`.

### Síntaxis Formal
```

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> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

Ejemplos
--------


```css
.example {
  -webkit-mask: url("mask.png") no-repeat fixed 20px 20px padding padding;
}
```

Compatibilidad con navegadores
------------------------------

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

See also
--------

* `-webkit-mask-origin`, `-webkit-mask-box-image`, `-webkit-mask-attachment`, `-webkit-mask-clip`, `-webkit-mask-image`, `-webkit-mask-composite`, `-webkit-mask-repeat`