Resumo

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

Sintaxe

/* Palavra-Chave */mask: none;/* Valor das Imagens */mask: url(mask.png); /* Imagem bitmap usada da máscara */mask: url(masks.svg#star); /* Elemento dentro do SVG usado como máscara *//* Valores Combinados */mask: url(masks.svg#star) luminance; /* Elemento dentro do SVG usado como máscara de luminância */mask: url(masks.svg#star) 40px 20px; /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */mask: url(masks.svg#star) repeat-x; /* Elemento dentro do SVG usado como máscara repedida horizontalmente */mask: url(masks.svg#star) stroke-box; /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */mask: url(masks.svg#star) exclude; /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem *//* Valores Globais */mask: inherit;mask: initial;mask: unset;

Valores

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

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>

Exemplos

.target {  mask: url(#c1);}.anothertarget {  mask: url(resources.svg#c1);}

Especificações

Compatibilidade com navegadores

Veja também

• clip-path,filter
• Aplicanto efeitos SVG no conteúdo HTML
• SVG