Mascarando em CSS

Às vezes, ao adicionar imagens a um site, é necessário embaçar, esconder, iluminar ou concentrar certas partes de uma imagem específica. CSS vamos fazer isso com grande facilidade e refere -se a este procedimento como mascarar.

Mascarar significa ocultar ou clip imagens que aparecem em sites em pontos específicos usando a propriedade CSS Mask-Image. Nesta redação, discutiremos como a mascaramento é realizada de várias maneiras usando a propriedade Máscara-Imagem.

Vamos começar.

Propriedade de imagem-máscara

A propriedade de imagem máscara oculta completamente ou parcialmente partes de imagens usando diferentes níveis de opacidade. Outro objetivo desta propriedade é colocar uma imagem como uma máscara sobre outra.

Sintaxe

Máscara-Imagem: Nenhum | imagem | url | inicial | herdar;

Os parâmetros são explicados abaixo.

nenhum: Este é um valor padrão.

imagem: Este valor torna uma imagem que será usada como uma camada de máscara.

URL: Este valor recebe uma imagem ou elemento SVG na forma de uma referência de URL.

Vamos entender o mascaramento no CSS usando vários exemplos.

Exemplo 1

No exemplo abaixo, mascararemos um logotipo sobre outra imagem.

Html

Antes de mascarar

Depois de mascarar

CSS

div img
Largura: 250px;
Altura: 250px;

.Mascarar
Largura: 300px;
Altura: 300px;
Background-Color: Black;
-Webkit-mask-box-image: URL (logotipo.png);

Saída

As imagens foram mascaradas com sucesso.

Exemplo 2

Você também pode usar gradientes para mascarar imagens. Abaixo, apresentamos a você um exemplo em que criamos uma elipse como uma máscara sobre a imagem usando máscara.

Html

Simplesmente adicionamos uma imagem usando a tag.

CSS

div img
Largura: 250px;
Altura: 250px;

.Mascarar
Largura: 300px;
Altura: 300px;
-Imagem da caixa de webkit-máscara: gradiente radial (Ellipse 60% 30% a 50% 50%, cinza 60%, RGBA (146, 140, 140, 0.3) 40%);
borda: 3px preto sólido;

No código acima, estamos usando a função de gradiente radial para mascarar uma camada sobre uma imagem na forma de uma elipse com um tamanho de 60% na parte superior e inferior e 30% à direita e à esquerda. Enquanto isso, as posições iniciais de todos os lados são definidas em 50% para manter a forma de elipse no centro. Além disso, também demos uma cor inicial e também uma cor final.

Saída

Uma camada de máscara foi adicionada com sucesso à imagem na forma de uma elipse.

Exemplo 3

Suponha que você queira mascarar uma camada na forma de um círculo usando gradientes. Aqui está o código de exemplo.

CSS

div img
Largura: 200px;
Altura: 200px;

.Mascarar
Largura: 250px;
Altura: 250px;
-Imagem da caixa de webkit-máscara: gradiente radial (círculo a 50%50%, cinza 60%, RGBA (146, 140, 140, 0.3) 60%);
borda: 3px preto sólido;

Para formar um círculo no centro, atribuímos uma posição de 50% em todos os lados com as cores iniciais e finais.

Saída

Um círculo mascarado foi criado com sucesso.

Conclusão

Mascarar significa ocultar ou clip imagens que aparecem em sites em pontos específicos usando a propriedade CSS Mask-Image. A propriedade de imagem máscara executa esta tarefa atribuindo diferentes níveis de opacidade a partes de imagens, além disso, pode mascarar uma imagem sobre outra. Ele é útil quando você quer embaçar, esconder, iluminar ou concentrar certas partes de uma imagem específica. Neste post, discutimos como o mascaramento é realizado no CSS, juntamente com exemplos relevantes.