Máscaras CSS

Usando máscara CSS, você pode criar uma camada de máscara e colocá-la no elemento para ocultar parte ou toda parte do elemento.

propriedade mask-image

CSS mask-image a propriedade especifica a imagem da camada de máscara.

A imagem de camada de máscara pode ser imagem PNG, imagem SVG,Gradiente CSS ou Elemento <mask> do SVG.

Suporte do navegador

Os números na tabela a seguir representam a primeira versão do navegador que suporta completamente essa propriedade.

com -webkit- Os números prefixados representam a primeira versão que suporta esse prefixo.

Usar imagem como camada de máscara

Para usar imagens PNG ou SVG como camada de máscara, use url() Passar a imagem da camada de máscara.

A imagem de máscara precisa ter uma área transparente ou semi-transparente. Preto representa completamente transparente.

Esta é a imagem de máscara que usaremos (imagem PNG):

Esta é a imagem da Cinque Terre italiana:

Agora, vamos aplicar a imagem de máscara (a imagem PNG acima) como camada de máscara na imagem da Cinque Terre italiana:

Exemplo

A seguir está o código-fonte:

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

Experimente você mesmo

exemplo de explicação

mask-image o atributo especifica a imagem usada como camada de máscara do elemento.

mask-repeat o atributo especifica se a imagem de máscara deve ser repetida ou como deve ser repetida. O valor no-repeat indica que a imagem de máscara não será repetida (a imagem de máscara será exibida apenas uma vez).

outro exemplo

se omitirmos mask-repeat o atributo, a imagem de máscara será exibida repetidamente ao longo da imagem de Wuyue inteira:

Exemplo

A seguir está o código-fonte:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Experimente você mesmo

usar gradiente como camada de máscara

A CSS de gradiente linear e radial também pode ser usada como imagem de máscara.

exemplo de gradiente linear

Aqui, usamos o gradiente linear como camada de máscara da imagem. Este gradiente linear vai do topo (preto) ao fundo (transparente):

Exemplo

usar gradiente linear como camada de máscara:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Experimente você mesmo

Aqui, usamos o gradiente linear e a máscara de texto como camada de máscara da imagem:

Exemplo

usar gradiente linear e máscara de texto como camada de máscara:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Experimente você mesmo

exemplo de gradiente radial

Aqui, usamos o gradiente radial (formado por círculo) como camada de máscara da imagem:

Exemplo

usar gradiente radial como camada de máscara (circular):

.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%);
}

Experimente você mesmo

Aqui, usamos uma gradiente radial (forma elíptica) como camada de máscara para a imagem:

Exemplo

Usar outra gradiente radial como máscara (ellipse):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Experimente você mesmo

Uso de SVG como máscara

O elemento <mask> do SVG pode ser usado dentro de gráficos SVG para criar efeitos de máscara.

Aqui, usamos o elemento <mask> do SVG para criar diferentes camadas de máscara para a imagem:

Exemplo

Um manto SVG (forma triangular):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Experimente você mesmo

Exemplo

Um manto SVG (forma estrela):

<svg width="600" height="400">
  <mask id="svgmask2">
    <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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Experimente você mesmo

Exemplo

Um manto SVG (forma circular):

<svg width="600" height="400">
  <mask id="svgmask3">
    <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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Experimente você mesmo