Como mudar a cor da imagem no CSS

Combinar as funções Opacity () e Drop-Shadow () na propriedade Filter mudará a cor de uma imagem no CSS. A propriedade do filtro pode ser usada para aplicar vários efeitos a uma imagem, como reflexões, escala de cinza, sépia, sombras e muito mais. Essas funções usam diferentes componentes de cores para modificar a cor da imagem. Neste manual, você adquirirá conhecimento de como usar o CSS para mudar a cor de uma imagem.

Aqui estão os resultados deste artigo:

• Propriedade do filtro
• Drop-Shadow ()
• opacidade()

Vamos começar!

Alterar a cor da imagem no CSS

Para alterar a cor da imagem no CSS, primeiro aprenda sobre a propriedade do filtro e suas funções. Você vai entender melhor dessa maneira.

Filtre a propriedade CSS

Para controlar o efeito visual de uma propriedade de filtro de imagem de CSS é usada. Os efeitos visuais são:

• borrão
• brilho
• Ajuste de cores
• Drop-shadow
• opacidade

Sintaxe da propriedade Filter

A sintaxe da propriedade Filter é:

Filtro: Blur () | Drop-Shadow () | opacidade()

• borrão(): usado para aplicar efeito desfoque na imagem.
• Drop-Shadow (): Crie uma sombra sobre uma imagem.
• opacidade(): usado para adicionar transparência à imagem.

Podemos usar vários filtros usando esta propriedade do filtro. Este artigo é sobre como alterar a cor da imagem, então aqui vamos explicar como usar as funções Drop-Shadow () e Opacity ().

Drop-Shadow ()

Drop-Shadow () é uma função interna do CSS que permite definir a sombra para qualquer elemento ou imagem. Os seguintes parâmetros são usados ​​na função Drop-Shadow () para alterar a cor de uma imagem:

• offset-x: É usado para adicionar sombra horizontal.
• Offset-y: Sombras são adicionadas verticalmente usando isso.
• cor: Sombras são coloridas com este parâmetro.

Para esclarecer esses pontos, vamos para a sintaxe da Shadow:

Drop-Shadow (cor de deslocamento-x com deslocamento)

• Offset-X e Offset-y podem ser positivos ou negativos.
• Em horizontal, o valor positivo é usado para adicionar os efeitos no lado direito e negativo é para o lado esquerdo.
• Na vertical, o valor positivo é para o lado inferior e o negativo é para o topo.
• No local de cor, você pode atribuir qualquer cor que desejar dar à imagem.

opacidade()

opacity () é usado para adicionar transparência a um elemento ou qualquer imagem. A sintaxe da opacidade () é:

opacidade (número);

Aqui ““número” eus usado para definir o nível de opacidade entre 0.0 a 1.0. Para tornar uma imagem totalmente transparente, você pode defini -la como 0.0.

Para esclarecer os pontos acima mencionados, vamos para o exemplo.

Como mudar a cor da imagem no CSS?

No exemplo abaixo, primeiro, adicionaremos uma imagem usando tag:

Antes de aplicar a propriedade do filtro, o resultado foi assim:

Para alterar a cor de uma imagem, vamos para o CSS e aplicar a propriedade do filtro a ela. Vamos definir a opacidade para 0.5 para a transparência da imagem. Na função Drop-Shadow (), o valor de Offset-X e Offset-Y é 0 porque queremos mudar a cor de uma imagem.

.imagem
filtro: opacidade (0.5) Shadow Drop (0 0 Brown);

Aqui está o resultado final após a implementação:

A cor da imagem foi alterada com sucesso.

Conclusão

Para modificar a cor de uma imagem, duas funções CSS: Opacity () e Drop-Shadow () são usadas com a propriedade do filtro. opacity () especifica a transparência da imagem e Drop-Shadow () atribui cor e sombra à imagem. Este artigo explicou o método de alterar a cor de uma imagem usando CSS.