-webkit-mask

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 -webkit-mask es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-attachment, -webkit-mask-position, -webkit-mask-origin, y -webkit-mask-clip.

Valor inicial	as each of the properties of the shorthand: `mask-image`: `none` `mask-mode`: `match-source` `mask-repeat`: `repeat` `mask-position`: `0% 0%` `mask-clip`: `border-box` `mask-origin`: `border-box` `mask-size`: `auto` `mask-composite`: `add`
Applies to	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Heredable	no
Percentages	as each of the properties of the shorthand: `mask-position`: refer to size of mask painting area minus size of mask layer image (see the text for `background-position`)
Valor calculado	as each of the properties of the shorthand: `mask-image`: as specified, but with `<url>` values made absolute `mask-mode`: como se especifica `mask-repeat`: Consists of two keywords, one per dimension `mask-position`: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. `mask-clip`: como se especifica `mask-origin`: como se especifica `mask-size`: as specified, but with relative lengths converted into absolute lengths `mask-composite`: como se especifica
Animation type	as each of the properties of the shorthand: `mask-image`: discrete `mask-mode`: discrete `mask-repeat`: discrete `mask-position`: a repeatable list `mask-clip`: discrete `mask-origin`: discrete `mask-size`: a repeatable list `mask-composite`: discrete
Creates stacking context	yes

Síntaxis

css

/* Palabras clave valor */
-webkit-mask: none;

/* Valores de imágene */
-webkit-mask: url(mask.png); /* Imagen de pixel usado coo máscara */
-webkit-mask: url(masks.svg#star); /* Elemento dentro de un gráfico SVG usado como máscara */
-webkit-mask: linear-gradient(
  transparent,
  black
); /* Gradiente usado como máscara */

/* Valores combinados */
-webkit-mask: url(masks.svg#star) 40px 20px; /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
-webkit-mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
-webkit-mask: url(masks.svg#star) repeat-x; /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
-webkit-mask: url(masks.svg#star) border; /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
-webkit-mask: url(masks.svg#star) text; /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */

/* Valores globales */
-webkit-mask: inherit;
-webkit-mask: initial;
-webkit-mask: unset;

Valores

mask-image: Requierido.Ver -webkit-mask-image.
mask-repeat: Opcional. Ver -webkit-mask-repeat.
mask-attachment: Opcional Ver -webkit-mask-attachment.
mask-position: Opcional. Ver -webkit-mask-position.
mask-origin: Opcional. Ver -webkit-mask-origin.
mask-clip: Opcional Ver -webkit-mask-clip.

Síntaxis Formal

mask = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>                

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

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude    

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-box> = 
  <visual-box>  |
  margin-box    

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

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

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

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

Ejemplos

css

.example {
  -webkit-mask: url("mask.png") no-repeat fixed 20px 20px padding padding;
}