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); 
}