Mascaramento CSS - A propriedade máscara-imagem

Índice

    Mostrar índice

Com o mascaramento CSS você cria uma camada de máscara para colocar sobre um elemento para ocultar parcial ou totalmente partes do elemento.

A propriedade CSS máscara-imagem

A propriedade CSS mask-image especifica uma máscara camada imagem.

A imagem da camada de máscara pode ser uma imagem PNG, uma imagem SVG, um gradiente CSS ou um Elemento SVG.

Suporte ao navegador

Observação: a maioria dos navegadores tem suporte apenas parcial para CSS mascaramento. Você precisará usar o prefixo -webkit- além do padrão propriedade na maioria dos navegadores.

Os números na tabela abaixo especificam a primeira versão do navegador que oferece suporte total à propriedade. Números seguidos de -webkit- especificam a primeira versão que funcionou com um prefixo.

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Use uma imagem como camada de máscara

Para usar uma imagem PNG ou SVG como camada de máscara, use um valor url() para passar a máscara imagem da camada.

A imagem da máscara precisa ter uma área transparente ou semitransparente. Preto indica totalmente transparente.

Aqui está a imagem da máscara (uma imagem PNG) que usaremos:

W3Schools.com

Aqui está uma imagem de Cinque Terre, na Itália:

Cinque Terre

Agora, aplicamos a imagem da máscara (a imagem PNG acima) como camada de máscara para a imagem de Cinque Terre, Itália:

Cinque Terre

Exemplo

Aqui está o código fonte:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Exemplo explicado

A propriedade mask-image especifica a imagem para ser usado como uma camada de máscara para um elemento.

A propriedade mask-repeat especifica se ou como uma imagem de máscara será repetida. O sem repetição valor indica que a imagem da máscara não será repetida (a imagem da máscara será ser mostrado apenas uma vez).

Outro exemplo

Se omitirmos a propriedade mask-repeat, a imagem da máscara será repetida em toda a imagem de Cinque Terre, Itália:

Cinque Terre

Exemplo

Aqui está o código fonte:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Use gradientes como camada de máscara

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

Exemplos de gradiente linear

Aqui, usamos um gradiente linear como camada de máscara para nossa imagem. Este gradiente linear vai de cima (preto) para baixo (transparente):

Cinque Terre
 

Exemplo

Use um gradiente linear como camada de máscara:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Aqui, usamos um gradiente linear junto com a máscara de texto como camada de máscara para nossa imagem:

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Exemplo

Use um gradiente linear junto com a máscara de texto como camada de máscara:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

Exemplos de gradiente radial

Aqui, usamos um gradiente radial (em forma de círculo) como camada de máscara para nossa imagem:

Cinque Terre

Exemplo

Use um gradiente radial como camada de máscara (um círculo):

   .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 →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Aqui, usamos um gradiente radial (em forma de elipse) como camada de máscara para nossa imagem:

Cinque Terre

Exemplo

Use outro gradiente radial como camada de máscara (uma elipse):

   .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 →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Use SVG como camada de máscara

O elemento SVG <mask> pode ser usado dentro de um Gráfico SVG para criar efeitos de máscara.

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

Sorry, your browser does not support inline SVG.

Exemplo

Uma camada de máscara SVG (formada como um triângulo):

   <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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Exemplo

Uma camada de máscara SVG (formada como uma 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="img_5terre.jpg" mask="url(#svgmask2)"></image>
    </svg>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<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="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Exemplo

Uma camada de máscara SVG (formada como círculos):

   <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="img_5terre.jpg" 
    mask="url(#svgmask3)"></image>
</svg>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<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="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Propriedades de mascaramento CSS

A tabela a seguir lista todas as propriedades de mascaramento CSS:

mask-image

Especifica uma imagem a ser usada como camada de máscara para um elemento

mask-mode

Especifica se a imagem da camada de máscara será tratada como uma máscara de luminância ou como uma máscara alfa

mask-origin

Especifica a posição de origem (a área de posição da máscara) de uma camada de máscara imagem

mask-position

Define a posição inicial de uma imagem da camada de máscara (em relação à máscara área de posição)

mask-repeat

Especifica como a imagem da camada de máscara é repetida

mask-size

Especifica o tamanho de uma imagem de camada de máscara