El "filtrar"La propiedad se puede utilizar para aplicar varios efectos visuales a una imagen, como reflexión, escala de grises, sepia, saturado, rotas de tono y más. Combinar las funciones relacionadas de los efectos visuales mencionados en la propiedad del filtro cambiará el color de una imagen. Estas funciones usan diferentes componentes de color para modificar el color de la imagen.

En este manual, aprenderá a usar CSS para cambiar el color de una imagen a azul.

Cómo cambiar el color de la imagen en CSS?

En CSS, puede utilizar la propiedad de filtro para aplicar cualquier efecto gráfico a una imagen o para el propósito de cambio de color a un elemento HTML. Además, se puede usar para cambiar el color de la imagen. Entonces, primero, pase por la propiedad del filtro y sus funciones.

Propiedad de filtro CSS

Para controlar el efecto visual de una imagen, se utilizará la propiedad de filtro de CSS. Sus efectos visuales compatibles son:

• • ajuste de color
  • difuminar
  • sombra de caída
  • brillo
  • opacidad

Sintaxis

Nuestro objetivo es cambiar el color de una imagen a azul en CSS utilizando la propiedad del filtro. Para hacerlo, seguiremos la sintaxis dada:

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

La descripción de las funciones anteriores es:

• • sepia(): Se usa para convertir una imagen en una imagen sepia dándole una apariencia parduzca/amarilla.
  • Hue-Rotate (): Se usa para aplicar la rotación del tono a la imagen. Esta función acepta el ángulo requerido para la rotación como argumento.
  • saturar(): Se utiliza para establecer la saturación en una imagen. Esta función acepta un porcentaje o un número como argumento que representa el monto de la conversión.

Para aclarar los puntos mencionados anteriormente, pasemos al ejemplo.

Veamos un ejemplo para cambiar el color de una imagen a azul utilizando las funciones de propiedad del filtro mencionadas.

Ejemplo: Cómo cambiar el color de una imagen a azul en CSS?

Para cambiar el color de la imagen a azul, primero, especifique la fuente de la imagen seleccionada en el archivo HTML.

Aquí, hemos agregado una imagen usando la etiqueta y establecer su ancho en "450px":

Cambiar el color de una imagen a azul

Antes de aplicar la propiedad de filtro, nuestra página web se verá así:

Muévase al CSS y aplique la propiedad del filtro para cambiar el color de una imagen a azul.

Para hacerlo, estableceremos el valor de las funciones Sepia (), Hue-Rotate () y Saturate () como "100%","190 grados" y "900%"Respectivamente:

img
Filtro: sepia (100%) saturado de tono (190 grados) (900%);

Nota: La secuencia de las funciones agregadas debe ser la misma que la dada. En caso de que cambie la secuencia especificada, la imagen no tendrá el efecto requerido.

Ahora, guarde su código y abra el archivo HTML en su navegador:

Ejemplo 2: Cómo cambiar el color de una imagen a azul claro?

Para cambiar el color de la imagen a azul claro, los valores de las funciones Sepia (), Hue-Rotate () y Saturate () se cambiarán.

Aquí, agregaremos otra imagen usando la etiqueta:

Cambiar el color de una imagen a azul claro

Ahora, muévase a la sección CSS y aplique el "filtrar"Propiedad a la imagen agregada.

Aquí, estableceremos el valor de sepia () como "300%", Hue-Rotate () como"150 grados"Y saturate () como"450%":

img
Filtro: sepia (300%) ROTATO DE TONELA (150 grados) saturado (450%);

Como resultado, el color de la imagen dada se cambiará a azul claro.

Producción

Hemos cubierto el método más simple para cambiar el color de una imagen a azul en CSS.

Conclusión

Para cambiar el color de una imagen a azul "sepia()","Hue-Rotate ()", y "saturar()"Funciones del"filtrarSe utilizan la propiedad. El color de la imagen cambia de acuerdo con el valor dado de las funciones Sepia (), Hue-Rotate () y Saturate (). Usando esto, puede configurar los diferentes colores de la imagen, como el azul y el azul claro. Como hemos explicado en este artículo, la propiedad del filtro CSS le permite cambiar el color de una imagen a azul.