As imagens em escala de cinza consistem em cor preta, cinza e branca. Mais especificamente, a cor cinza tem vários níveis de tons. No HTML, os usuários podem converter a imagem em uma escala de cinza com a ajuda do CSS “filtro" propriedade. A propriedade do filtro é usada principalmente para definir e definir o efeito visual de uma imagem, como renderizar imagens, fundos e fronteiras.

Neste tutorial, demonstraremos como converter uma imagem em escala de cinza em HTML/CSS

Como converter uma imagem em escala de cinza em HTML/CSS?

Para converter uma imagem em escala de cinza em HTML/CSS, siga as instruções fornecidas.

Etapa 1: adicione um contêiner div

Primeiro, adicione um recipiente de div no documento HTML, utilizando o “" marcação. Então, atribua -o a "aula”Atributo com um valor específico. Por exemplo, "IMG-Grayscale”É usado para atributos de classe.

Etapa 2: Inserir títulos

Em seguida, adicione o título de primeiro nível usando o “

”Tag, então incorpore o título do nível dois com a ajuda de“

Etapa 3: Adicionar imagem

Depois disso, adicione uma imagem usando o “”Tag junto com os atributos necessários:

• O "src”O atributo é usado para adicionar um URL da imagem.
• ““altura”É utilizado para definir a altura da imagem em um recipiente.
• ““largura”Define o tamanho da imagem horizontalmente.
• ““alt”É utilizado para adicionar o texto que será exibido se a imagem não for carregada devido a alguns motivos:

Linuxhint Content Creators

Imagem em escala de cinza

Saída

Etapa 4: Atributo da classe de acesso

Acesse o atributo de classe com a ajuda de “.IMG-Grayscale”E aplique o“alinhamento de texto”Propriedade para definir o alinhamento do texto.

Etapa 5: cabeçalho de estilo

Aplicar o "cor”Propriedade no cabeçalho acessando -o com o nome da tag“H1”.

Etapa 6: converta a imagem em escala de cinza

Agora, acesse a imagem utilizando o “img”:

.IMG-Grayscale
Alinhamento de texto: centro;

H1
Cor: RGB (83, 21, 197);

img
filtro: escala de cinza (100%);

Aplicar o "filtro”Propriedade e defina o valor“Escala de cinza (100%)”Para converter a imagem em uma escala de cinza.

Saída

Pode -se notar que a imagem foi convertida em uma imagem em escala de cinza:

Afirmamos o método para converter uma imagem em escala de cinza em HTML/CSS.

Conclusão

Para converter uma imagem em escala de cinza em HTML e CSS, adicione uma imagem em um contêiner com a ajuda do “" marcação. Em seguida, acesse a imagem no CSS por nome da tag e aplique o “filtro”Propriedade com o valor“Escala de cinza (100%)”. Este post demonstrou o método mais fácil para converter uma imagem em escala de cinza em HTML usando CSS.