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 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:
  • mask-image: as specified, but with url values made absolute
  • mask-mode: as specified
  • mask-repeat: Consists of two keywords, one per dimension
  • mask-position: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
  • mask-clip: as specified
  • mask-origin: as specified
  • mask-size: as specified, but with relative lengths converted into absolute lengths
  • mask-composite: as specified
Animation typeas each of the properties of the shorthand:
Creates stacking contextyes

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> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ 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,∞]> | 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>       |
  <gradient>  

<mask-source> = 
  <url>  

<length-percentage> = 
  <length>      |
  <percentage>  

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

<url> = 
  <url()>  |
  <src()>  

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

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

BCD tables only load in the browser

Veja também