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.

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> =
<position-one>|
<position-two>|
<position-four>

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

<repeat-style> =
repeat-x|
repeat-y|
repeat-block|
repeat-inline|
<repetition>{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>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<mask-source> =
<url>

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

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

<repetition> =
repeat|
space|
round|
no-repeat

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

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

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

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

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

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

<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

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

Compatibilidad con navegadores

See also

• -webkit-mask-origin,-webkit-mask-box-image,-webkit-mask-attachment,-webkit-mask-clip,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat