-webkit-mask

No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

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

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 No support No support No support 4.0
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 2.1 No support No support No support 3.2

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,