-webkit-mask-image

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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 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; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Heredable	no
Valor calculado	as specified, but with `<url>` values made absolute
Animation type	discrete

Sintaxis

css

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

Sintaxis Formal

mask-image = 
  <mask-reference>#  

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Ejemplos

css

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 navegadores

Ver además

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