Cambiar el color de la imagen en CSS

1. Utilice la propiedad filter para cambiar el color de la imagen en CSS
2. Utilice las funciones opacity() y drop-shadow() en la propiedad filter para cambiar el color de la imagen en CSS

Este artículo presentará algunos métodos para cambiar el color de la imagen en CSS.

Utilice la propiedad filter para cambiar el color de la imagen en CSS

La propiedad filter establece la superposición de una imagen en CSS.

Podemos aplicar efectos visuales y gráficos en una imagen usando la propiedad filter. Por ejemplo, podemos difuminar una imagen, cambiar el contraste y el brillo, aplicar un efecto de sombra, saturación, escala de grises y opacidad con la propiedad filter.

Hay una variedad de opciones que podemos aplicar a las imágenes con la propiedad filter. La sintaxis de la propiedad filter se muestra a continuación.

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

Podemos usar los valores de % para configurar las opciones anteriores. El valor más bajo tendrá menos efecto en la imagen y viceversa.

También podemos usar el valor decimal en lugar del valor porcentual. Por ejemplo, podemos escribir 0.8 para 80%.

Ahora, veamos los ejemplos de los diferentes filtros.

Por ejemplo, inserte una imagen con la URL https://loremflickr.com/320/240 seis veces usando la etiqueta img y establezca las clases brightness, blur, saturate, grayscale y contrast con la etiqueta img, como se muestra en el ejemplo siguiente. En CSS, seleccione la etiqueta img y establezca el width en 25% y la propiedad float en left.

A continuación, seleccione la clase brightness y utilice la propiedad filter para establecer el brillo en 1.25. Del mismo modo, seleccione las clases respectivas y ajuste blur a 2px, saturate a 300%, grayscale a 200% y contrast a 60% según la clase.

Aquí, la primera imagen es la imagen original y el resto contiene los filtros. Por lo tanto, podemos usar la propiedad filter para cambiar el color de la imagen en CSS.

Código de ejemplo:

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

Utilice las funciones opacity() y drop-shadow() en la propiedad filter para cambiar el color de la imagen en CSS

Podemos cambiar el color de la imagen en CSS combinando las funciones opacity() y drop-shadow() en la propiedad filter. Podemos proporcionar el color de la sombra desde la función drop-shadow, y podemos establecer la sombra lo más fina posible para que el color de la imagen solo cambie sin formar una sombra real.

La opacidad le dará un color más visible a la imagen. Podemos especificar la sombra horizontal, la sombra vertical, el radio de desenfoque, el valor de dispersión y el color con la función drop-shadow.

Por ejemplo, inserte una imagen HTML, seleccione la etiqueta img en CSS y aplíquele la propiedad filter. En la propiedad filter, establezca la opacity en 0.4. A continuación, establezca el valor 0 0 0 red como parámetro de la función drop-shadow.

Aquí, establecemos el valor 0 para las sombras horizontales y verticales. Como resultado, una sombra se encuentra directamente detrás de la imagen.

El valor 0 del desenfoque también hará que la imagen sea más nítida en los bordes. Sin embargo, el color red se aplicará a la sombra y la imagen será rojiza.

De esta forma, podemos combinar las funciones opacity() y drop-shadow() en la propiedad filter para cambiar el color de la imagen en CSS.

Código de ejemplo:

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

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