-webkit-mask

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.

Síntaxis

/* 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-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip>]*
where 
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?

Ejemplos

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

Compatibilidad con los distintos navegadores

See also

• -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-attachment, -webkit-mask-clip, -webkit-mask-image, -webkit-mask-composite, -webkit-mask-repeat