-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 función no está estandarizada. No recomendamos usar funciones no estándar en producción, ya que tienen un soporte limitado en los navegadores y pueden cambiar o eliminarse. Sin embargo, pueden ser una alternativa adecuada en casos específicos donde no exista una opción estándar.

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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<mask-source> = 
  <url>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨22 jul 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content