MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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 valueas each of the properties of the shorthand:
Aplica-se aall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritednão
Percentagesas each of the properties of the shorthand:
Midiavisual
Computed valueas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

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.

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.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: teoli, Sebastianz, yagosrocha
 Última atualização por: teoli,