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: `mask-origin`: Value not found in DB! `mask-clip`: Value not found in DB! `mask-border`: Value not found in DB!
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: `mask-position`: Value not found in DB!
Midia	visual
Computed value	as each of the properties of the shorthand: `mask-origin`: Value not found in DB! `mask-clip`: Value not found in DB! `mask-border`: Value not found in DB!
Animatable	as each of the properties of the shorthand: `mask-position`: Value not found in DB! `mask-size`: Value not found in DB!
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
where 
<mask-source> = <url>
<shape-box> = <box> | margin-box
where 
<box> = border-box | padding-box | content-box

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.

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.