-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:
|
---|---|
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:
|
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Creates stacking context | yes |
Síntaxis
/* 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
.example {
-webkit-mask: url("mask.png") no-repeat fixed 20px 20px padding padding;
}
Compatibilidad con navegadores
BCD tables only load in the browser