-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
Animation typediscrete
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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Características Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico Sin soporte 1.0 Sin soporte Sin soporte 4.0
Múltiples imágenes de máscara Sin soporte 1.0 Sin soporte Sin soporte 4.0
Gradientes Sin soporte 1.0-webkit Sin soporte Sin soporte 4.0-webkit
Máscaras SVG Sin soporte 8.0[1] Sin soporte Sin soporte 4.0
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Soporte básico 3.2 Sin soporte Sin soporte 2.1
Múltiples imágenes de máscara (Yes) Sin soporte Sin soporte (Yes)
Gradientes (Yes)-webkit Sin soporte Sin soporte (Yes)-webkit
Máscaras SVG (Yes) Sin soporte Sin soporte (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,