-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 inicialas each of the properties of the shorthand:
Applies toall elements; In SVG, it applies to container elements excluding the defs (en-US) element and all graphics elements
Heredableno
Percentagesas each of the properties of the shorthand:
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Creates stacking contextyes

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 = 
<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 | 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,∞]> (en-US) | 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> =
<box> |
margin-box

<url> =
url( <string> (en-US) <url-modifier>* ) |
src( <string> (en-US) <url-modifier>* )

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

Ejemplos

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

Compatibilidad con los distintos navegadores

BCD tables only load in the browser

See also