O "filtroA propriedade pode ser usada para aplicar vários efeitos visuais a uma imagem, como reflexão, escala de cinza, sépia, saturar, tonalidade e mais. A combinação das funções relacionadas dos efeitos visuais mencionados na propriedade Filter mudará a cor de uma imagem. Essas funções usam diferentes componentes de cores para modificar a cor da imagem.

Neste manual, você aprenderá a usar o CSS para mudar a cor de uma imagem para azul.

Como mudar a cor da imagem no CSS?

No CSS, você pode utilizar a propriedade do filtro para aplicar qualquer efeito gráfico a uma imagem ou para os fins da mudança de cor para um elemento HTML. Além disso, pode ser usado para alterar a cor da imagem. Então, primeiro, passe pela propriedade do filtro e suas funções.

Propriedade do filtro CSS

Para controlar o efeito visual de uma imagem, a propriedade do filtro do CSS será usada. Seus efeitos visuais suportados são:

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

Sintaxe

Nosso objetivo é alterar a cor de uma imagem para azul no CSS usando a propriedade do filtro. Para fazer isso, seguiremos a sintaxe dada:

Filtro: Sepia () | Hue-Rotate () | saturar()

A descrição das funções acima são:

• • sépia(): É usado para converter uma imagem em uma imagem de sépia, dando -lhe uma aparência acastanhada/amarela.
  • Hue-rotate (): É usado para aplicar a rotação de matiz à imagem. Esta função aceita o ângulo necessário para a rotação como argumento.
  • saturar(): É utilizado para definir a saturação em uma imagem. Esta função aceita uma porcentagem ou um número como um argumento que representa o valor da conversão.

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

Vamos conferir um exemplo para alterar a cor de uma imagem para azul usando as funções de propriedade do filtro mencionado.

Exemplo: como alterar a cor de uma imagem para azul no CSS?

Para alterar a cor da imagem para azul, primeiro, especifique a fonte da imagem selecionada no arquivo html.

Aqui, adicionamos uma imagem usando tag e definimos sua largura como “450px”:

Mude a cor de uma imagem para azul

Antes de aplicar a propriedade Filter, nossa página da web ficará assim:

Mova para o CSS e aplique a propriedade do filtro para alterar a cor de uma imagem para azul.

Para fazer isso, definiremos o valor de funções Sepia (), Hue-Rotate () e Satatura () como “100%","190DEG" e "900%”Respectivamente:

img
Filtro: Sepia (100%)-Rotate (190 graus) saturam (900%);

Observação: A sequência das funções adicionadas deve ser a mesma que a dada. Caso você altere a sequência especificada, a imagem não tomará o efeito necessário.

Agora, salve seu código e abra o arquivo HTML no seu navegador:

Exemplo 2: Como mudar a cor de uma imagem para azul claro?

Para alterar a cor da imagem para azul claro, os valores das funções Sepia (), Hue-Rotate () e Satature () serão alterados.

Aqui, adicionaremos outra imagem usando a tag:

Mude a cor de uma imagem para azul claro

Agora, vá para a seção CSS e aplique o “filtro”Propriedade da imagem adicionada.

Aqui, definiremos o valor de Sepia () como “300%”, Hue-rotate () como“150DEG”E Satature () como“450%”:

img
Filtro: sépia (300%)-rotate de matiz (150 graus) saturam (450%);

Como resultado, a cor da imagem fornecida será alterada para azul claro.

Saída

Cobrimos o método mais simples para alterar a cor de uma imagem para azul no CSS.

Conclusão

Para mudar a cor de uma imagem para azul, “sépia()","Hue-Rotate ()", e "saturar()”Funções do“filtro”Propriedade é usada. A cor da imagem muda de acordo com o valor fornecido das funções Sepia (), Hue-Rotate () e Satatrate (). Usando isso, você pode definir as diferentes cores da imagem, como azul e azul claro. Como explicamos neste artigo, a propriedade do filtro CSS permite alterar a cor de uma imagem para azul.