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 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:
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
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 = 
<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> =
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<bg-size> =
[ <length-percentage [0,∞]> (en-US) | 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

<masking-mode> =
alpha |
luminance |
match-source

<image> =
<url> (en-US) |
<gradient>

<mask-source> =
<url> (en-US)

<length-percentage> =
<length> (en-US) |
<percentage> (en-US)

<shape-box> =
<box> |
margin-box

<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)

<box> =
border-box |
padding-box |
content-box

<linear-gradient()> =
linear-gradient( [ <angle> (en-US) | to <side-or-corner> ]? , <color-stop-list> )

<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> =
<color> &&
<length-percentage>?

<linear-color-hint> =
<length-percentage>

<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>

<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )

<rgb()> =
rgb( [ <percentage> (en-US) | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> =
hsl( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> =
hwb( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> =
lab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lch()> =
lch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<oklab()> =
oklab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<oklch()> =
oklch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<cmyk-component> =
<number> |
<percentage> (en-US)

<alpha-value> =
<number> |
<percentage> (en-US)

<hue> =
<number> |
<angle> (en-US) |
none

<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> (en-US) | none ]{3}

<xyz-params> =
<xyz-space> [ <number> | none ]{3}

<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020

<xyz-space> =
xyz |
xyz-d50 |
xyz-d65

Exemplos

.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }

Especificações

Especificação Estado Comentário
CSS Masking Module Level 1
The definition of 'mask' in that specification.
Candidata a Recomendação 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.
Recomendação Definição inicial.

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

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