CSS propriedade mask

Página anterior marker-start
Próxima página mask-clip

Definição e uso

mask A propriedade é usada para ocultar elementos através de máscara ou recorte de imagem (parte ou toda).

mask A propriedade é uma abreviação das seguintes propriedades:

Exemplo

Exemplo 1

Crie uma camada de máscara para a imagem:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Experimente você mesmo

Exemplo 2

Crie diferentes camadas de máscara para a imagem usando gradientes linear e radial:

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Experimente você mesmo

Exemplo 3

Crie uma camada de máscara para a imagem usando o elemento <mask> do SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Experimente você mesmo

Exemplo 4

Crie uma camada de máscara para a imagem usando o elemento <mask> do SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Experimente você mesmo

Sintaxe do CSS

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Valor do atributo

Valor	Descrição
mask-image	Especifique a imagem usada como camada de máscara do elemento. O valor padrão é none.
mask-mode	Especifique se a imagem da camada de máscara deve ser vista como uma máscara de brilho ou máscara alpha. O valor padrão é match-source.
mask-repeat	Defina se e como a imagem da máscara deve ser repetida. O valor padrão é repeat.
mask-position	Defina a posição inicial da imagem da máscara (relativa à área de posição da máscara). O valor padrão é 0% 0%.
mask-clip	Especifique a área afetada pela imagem da máscara. O valor padrão é border-box.
mask-origin	Especifique a posição inicial da imagem da camada de máscara (área de posição da máscara). O valor padrão é border-box.
mask-size	Especifique o tamanho da imagem da camada de máscara. O valor padrão é auto.
mask-composite	Especifique a operação de composição usada entre a camada de máscara atual e a camada de máscara inferior. O valor padrão é add.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	none match-source repeat 0% 0% border-box border-box auto add
Herança:	Não
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	Módulo de Masking do CSS Nível 1
Sintaxe do JavaScript:	object.style.mask="url(star.svg)"