-webkit-mask-image

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 CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

Valor inicial	`none`
Applies to	all elements
Heredable	no
Media	visual
Valor calculado	absolute URI or `none`
Animatable	no
Canonical order	order of appearance in the formal grammar of the values

Síntaxis

-webkit-mask-image: url(images/mymask.png);
-webkit-mask-image: url(images/foo.png), url(images/bar.png);
-webkit-mask-image: none;

Valores

<uri>: La localización del recurso imagen que será utilizado como imagen de máscara.
<gradient>: La función webkit-gradient que será usada como imagen de máscara.
none: Usado para especificar si un elemento no tiene imagen de máscara.

Síntaxis Formal

<mask-image>[, <mask-image>]*

Ejemplos

body {
  -webkit-mask-image: url('/images/mymask.png');
}

div {
  -webkit-mask-image: url('/images/foo.png'), url('/images/bar.png');
}

p {
  -webkit-mask-image: none;
}

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

Compatibilidad con los distintos navegadores.

Desktop
Mobile

Características	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Soporte básico	No support	1.0	No support	No support	4.0
Múltiples imágenes de máscara	No support	1.0	No support	No support	4.0
Gradientes	No support	1.0-webkit	No support	No support	4.0-webkit
Máscaras SVG	No support	8.0^[1]	No support	No support	4.0

Feature	iOS Safari	Opera Mini	Opera Mobile	Android Browser
Soporte básico	3.2	No support	No support	2.1
Múltiples imágenes de máscara	(Yes)	No support	No support	(Yes)
Gradientes	(Yes)-webkit	No support	No support	(Yes)-webkit
Máscaras SVG	(Yes)	No support	No support	(Yes)

[1] Desde la versión 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

Ver además

-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat