mask
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.
Initial value | as each of the properties of the shorthand:
|
---|---|
Aplica-se a | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
Inherited | não |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type (en-US) | as each of the properties of the shorthand:
|
Creates stacking context | yes |
Sintaxe
css
/* 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># (en-US)
<mask-layer> =
<mask-reference> || (en-US)
<position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<geometry-box> || (en-US)
[ (en-US) <geometry-box> | (en-US) no-clip ] (en-US) || (en-US)
<compositing-operator> || (en-US)
<masking-mode>
<mask-reference> =
none | (en-US)
<image> | (en-US)
<mask-source>
<position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US)
<bg-size> =
[ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US) | (en-US)
cover | (en-US)
contain
<repeat-style> =
repeat-x | (en-US)
repeat-y | (en-US)
[ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)
<geometry-box> =
<shape-box> | (en-US)
fill-box | (en-US)
stroke-box | (en-US)
view-box
<compositing-operator> =
add | (en-US)
subtract | (en-US)
intersect | (en-US)
exclude
<masking-mode> =
alpha | (en-US)
luminance | (en-US)
match-source
<image> =
<url> | (en-US)
<gradient> (en-US)
<mask-source> =
<url>
<length-percentage> =
<length> (en-US) | (en-US)
<percentage> (en-US)
<shape-box> =
<visual-box> | (en-US)
margin-box
<url> =
<url()> | (en-US)
<src()>
<visual-box> =
content-box | (en-US)
padding-box | (en-US)
border-box
<url()> =
url( <string> (en-US) <url-modifier>* (en-US) ) | (en-US)
<url-token>
<src()> =
src( <string> (en-US) <url-modifier>* (en-US) )
Exemplos
css
.target {
mask: url(#c1);
}
.anothertarget {
mask: url(resources.svg#c1);
}
Especificações
Specification |
---|
CSS Masking Module Level 1 # the-mask |
Compatibilidade com navegadores
BCD tables only load in the browser