-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 inicialnone
Applies toall elements
Heredableno
Mediavisual
Valor calculadoabsolute URI or none
Animatableno
Canonical orderorder 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.

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

Etiquetas y colaboradores del documento

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