Propriedade mask-image do CSS

Página anterior mask-composite
Próxima página mask-mode

Definição e uso

mask-image A propriedade é usada para especificar a imagem usada como máscara do elemento.

Dica:Gradientes lineares e radiais no CSS também podem ser usados como imagens de máscara.

Exemplo

Exemplo 1

Crie camadas de máscara para imagens:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Experimente você mesmo

Exemplo 2

Utilize gradient linear e radial para criar diferentes camadas de máscara para imagens:

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

Experimente você mesmo

Exemplo 3

Use o elemento SVG <mask> para criar uma máscara para a imagem:

<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

Use o elemento SVG <mask> para criar outra camada de máscara para a imagem:

<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 CSS

mask-image: none|image|url()|initial|inherit;

Valor do atributo

Valor	Descrição
none	Valor padrão. Não usar imagem de máscara.
image	Usado como imagem de máscara.
url()	Referência de URL para o elemento de imagem ou SVG <mask>.
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
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 JavaScript:	object.style.maskImage="url(star.svg)"