-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 inicialas each of the properties of the shorthand:
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Heredableno
Percentagesas each of the properties of the shorthand:
Valor calculadoas 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 typeas each of the properties of the shorthand:
Creates stacking contextyes

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

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;
}

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also