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.
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 | 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>#
<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 |
<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
css
.target {
mask: url(#c1);
}
.anothertarget {
mask: url(resources.svg#c1);
}
Especificações
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |
Compatibilidade com navegadores
Loading…