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:
|
| Midia | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | as each of the properties of the shorthand:
|
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
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-layer>#where
<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>where
<mask-reference> = none | <image> | <mask-source>
<masking-mode> = alpha | luminance | auto
<bg-size> = [ <length> | <percentage> | 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
Exemplos
.target { mask: url(#c1); }
.anothertarget { mask: url(resources.svg#c1); }
Especificações
| Especificação | Estado | Comentário |
|---|---|---|
| CSS Masking Level 1 The definition of 'mask' in that specification. |
Candidate Recommendation | Estende-se a sua utilização para elementos HTML. Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'mask' in that specification. |
Recommendation | Definição inicial. |
Compatibilidade dos Navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Suporte Básico (para o SVG) | (Yes) | (Yes) [*] | ? | (Yes) | (Yes) |
| Aplica-se a elementos HTML | Não suportado | 3.5 (1.9.1) [*] | Não suportado | Não suportado | Não suportado |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte Básico | ? | ? | ? | ? | ? |
[*] A partir do Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.