Alterar a cor da imagem em CSS

1. Use a propriedade filter para alterar a cor da imagem em CSS
2. Use as funções opacity() e drop-shadow() na propriedade filter para alterar a cor da imagem em CSS

Este artigo apresentará alguns métodos para alterar a cor da imagem em CSS.

Use a propriedade filter para alterar a cor da imagem em CSS

A propriedade filter define a sobreposição de uma imagem em CSS.

Podemos aplicar efeitos visuais e gráficos em uma imagem usando a propriedade filter. Por exemplo, podemos desfocar uma imagem, alterar o contraste e o brilho, aplicar um efeito de sombra, saturação, escala de cinza e opacidade com a propriedade filter.

Existem variedades de opções que podemos aplicar às imagens com a propriedade filter. A sintaxe da propriedade filter é mostrada abaixo.

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate (); 

Podemos usar os valores % para definir as opções acima. O valor mais baixo terá menos efeito na imagem e vice-versa.

Também podemos usar o valor decimal em vez do valor percentual. Por exemplo, podemos escrever 0.8 para 80%.

Agora, vamos examinar os exemplos dos diferentes filtros.

Por exemplo, insira uma imagem com o URL https://loremflickr.com/320/240 seis vezes usando a tag img e defina as classes brightness, blur, saturate, grayscale, e contrast para a tag img, conforme mostrado no exemplo abaixo. Em CSS, selecione a tag img e defina a width como 25% e a propriedade float como left.

Em seguida, selecione a classe brightness e use a propriedade filter para definir o brilho para 1.25. Da mesma forma, selecione as respectivas classes e defina blur para 2px, saturate para 300%, grayscale para 200% e contrast para 60% de acordo com a classe.

Aqui, a primeira imagem é a imagem original e o resto contém os filtros. Assim, podemos usar a propriedade filter para alterar a cor da imagem no CSS.

Código de exemplo:

<img src="/img/DelftStack/logo.png" /> <img class="brightness" src="/img/DelftStack/logo.png" /> <img class="blur" src="/img/DelftStack/logo.png" /> <img class="saturate" src="/img/DelftStack/logo.png" /> <img class="grayscale" src="/img/DelftStack/logo.png" /> <img class="contrast" src="/img/DelftStack/logo.png" /> 

img {  width:25%;  float:left; }  .brightness { filter: brightness(1.25); } .blur { filter: blur(2px); } .saturate { filter: saturate(300%); } .grayscale { filter: grayscale(200%); } .contrast { filter: contrast(60%); } 

Use as funções opacity() e drop-shadow() na propriedade filter para alterar a cor da imagem em CSS

Podemos mudar a cor da imagem em CSS combinando as funções opacity() e drop-shadow() na propriedade filter. Podemos fornecer a cor da sombra a partir da função drop-shadow e podemos definir a sombra o mais fina possível para que a cor da imagem apenas mude sem formar uma sombra real.

A opacidade dará uma cor mais visível à imagem. Podemos especificar a sombra horizontal, a sombra vertical, o raio do desfoque, o valor da propagação e a cor com a função drop-shadow.

Por exemplo, insira uma imagem HTML, selecione a tag img no CSS e aplique a propriedade filter a ela. Na propriedade filter, defina a opacity como 0.4. Em seguida, defina o valor 0 0 0 red como o parâmetro da função drop-shadow.

Aqui, definimos o valor 0 para as sombras horizontais e verticais. Como resultado, uma sombra fica diretamente atrás da imagem.

O valor 0 do desfoque também tornará a imagem mais nítida nas bordas. No entanto, a cor red será aplicada à sombra e a imagem ficará avermelhada.

Desta forma, podemos combinar as funções opacity() e drop-shadow() na propriedade filter para alterar a cor da imagem em CSS.

Código de exemplo:

<img src="/img/DelftStack/logo.png" /> 

img{ filter: opacity(0.4) drop-shadow(0 0 0 red); }