Modo de máscara - CSS-Tricks

A mask-modepropriedade CSS indica se a imagem da camada de máscara CSS é tratada como uma máscara alfa ou uma máscara de luminância.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sintaxe

mask-mode: alpha | luminance | match-source

A propriedade aceita um valor de palavra-chave, ou uma lista separada por vírgula de dois ou todos os três alpha, luminancee mask-sourcevalores.

Valor inicial: match-source
Aplica-se a: todos os elementos. Em SVG, ele se aplica a elementos de contêiner, excluindo o elemento, todos os elementos gráficos.
Herdado: não
Valor calculado: conforme especificado
Tipo de animação: discreto

Valores

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: especifica que os valores alfa (canal alfa) da imagem da camada de máscara devem ser usados como valores de máscara.
luminance: especifica que os valores de luminância da imagem da máscara devem ser usados como os valores da máscara.
match-source: o valor padrão, que define o modo de máscara para alfa se a referência de máscara da mask-imagepropriedade for um elemento CSS como um URL de imagem ou um gradiente. No entanto, se a referência de máscara da mask-imagepropriedade for um elemento SVG , o valor especificado pela propriedade do tipo de máscara do elemento referenciado deve ser usado.
initial: aplica a configuração padrão da propriedade, que é match-source.
inherit: adota o valor do modo de máscara do pai.
unset: remove o modo de máscara atual do elemento.

Usando vários valores

Esta propriedade pode receber uma lista de valores separados por vírgulas para modos de máscara e cada valor é aplicado a uma imagem de camada de máscara correspondente especificada na propriedade imagem de máscara.

No exemplo a seguir, o primeiro valor especifica o modo de máscara correspondente à primeira imagem, o segundo valor para a segunda imagem e assim por diante.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Máscaras alfa e de luminância

O mascaramento em CSS vem com dois métodos que apresentam algumas diferenças no cálculo dos valores da máscara.

Máscaras alfa

As imagens são feitas de pixels, cada pixel possui alguns dados contendo valores de cores e talvez valores alfa com informações de transparência. Uma imagem com um canal alfa pode ser uma máscara alfa , como imagens PNG com áreas pretas e transparentes.

Em uma operação de mascaramento simples, temos um elemento e uma imagem de máscara colocados em cima dele. O valor alfa de cada pixel na imagem da máscara será mesclado com seu pixel correspondente no elemento.

Se o valor alfa for zero (ou seja, transparente), ele vence e essa parte do elemento é mascarada (ou seja, oculta).
Um valor alfa de um (ou seja, totalmente opaco) permite que o pixel do elemento seja visível.
Um valor entre 0 e 1 (por exemplo, 0,5) permite que o pixel seja visível, mas com um certo nível de transparência.

Portanto, neste método, o valor da máscara em um determinado ponto é simplesmente o valor do canal alfa naquele ponto da imagem da máscara e os canais de cores não contribuem para o valor da máscara.

O exemplo abaixo é uma máscara alfa que contém apenas áreas pretas (valor alfa de 1) e áreas transparentes (valor alfa de 0) e você pode ver o resultado que tem algumas partes totalmente visíveis e outras totalmente transparentes:

Usando um PNG com um canal alfa como uma imagem de máscara

Mas, no exemplo a seguir, estamos usando um gradiente com diferentes níveis de transparência. O resultado não é apenas visível ou transparente, mas existem algumas áreas translúcidas:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

E aqui está a aparência do resultado no navegador:

Usando um gradiente linear como uma imagem de máscara

Máscaras de luminância

Em uma máscara de luminância, as cores e os valores alfa são importantes. Quando o valor alfa é 0 (ou seja, totalmente transparente), o elemento é oculto; quando o valor alfa é 1, os valores da máscara variam dependendo do canal de cor daquele pixel. Por exemplo, quando a cor é branca, o elemento é visível; no caso da área preta, o elemento fica oculto.

Embora o cálculo dos valores da máscara em uma máscara alfa seja baseado apenas nos valores alfa da imagem da máscara, os valores da máscara de uma máscara de luminância são calculados a partir da luminância e dos valores alfa. Os navegadores fazem isso nas seguintes etapas:

Calcule um valor de luminância a partir dos valores do canal de cor.
Multiplique o valor de luminância calculado pelo valor alfa correspondente para produzir o valor da máscara.

/ explicação Para obter mais informações sobre esses cálculos, você pode verificar a seção de processamento de máscara na especificação do Módulo de mascaramento CSS 1 do Rascunho do Editor de setembro de 2019.

Abaixo está uma imagem de máscara com um sol branco no centro e áreas transparentes ao seu redor. Como você pode ver, as áreas enquanto são totalmente visíveis:

Usando uma imagem PNG com um canal alfa e áreas brancas como uma imagem de máscara

E no próximo exemplo, um gradiente colorido é usado como uma imagem de máscara e você pode ver o efeito de diferentes cores nos valores de máscara no modo de luminância: