Cómo cambiar el color de la imagen en CSS

Combinar las funciones Opacity () y Drop-Shadow () en la propiedad del filtro cambiará el color de una imagen en CSS. La propiedad del filtro se puede utilizar para aplicar varios efectos a una imagen, como reflexiones, escala de grises, sepia, sombras y más. Estas funciones usan diferentes componentes de color para modificar el color de la imagen. En este manual, adquirirá conocimiento de cómo usar CSS para cambiar el color de una imagen.

Aquí están los resultados de este artículo:

• propiedad de filtro
• shadow ()
• opacidad()

Empecemos!

Cambiar el color de la imagen en CSS

Para cambiar el color de la imagen en CSS, primero aprenda sobre la propiedad del filtro y sus funciones. Obtendrás una mejor comprensión de esta manera.

Filtrar propiedad CSS

Para controlar el efecto visual de una propiedad de filtro de imagen de CSS. Los efectos visuales son:

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

Sintaxis de la propiedad del filtro

La sintaxis de la propiedad del filtro es:

Filtro: blur () | shadow () | opacidad()

• difuminar(): utilizado para aplicar el efecto desenfoque en la imagen.
• shadow de caída (): crear una sombra sobre una imagen.
• opacidad(): Se usa para agregar transparencia a la imagen.

Podemos usar múltiples filtros utilizando esta propiedad de filtro. Este artículo trata sobre cómo cambiar el color de la imagen, por lo que aquí explicaremos cómo usar las funciones de shadow () y opacidad ().

shadow ()

drop-shadow () es una función incorporada de CSS que permite configurar la sombra en cualquier elemento o imagen. Los siguientes parámetros se utilizan en la función de shadow () de gota para cambiar el color de una imagen:

• offset-x: Se usa para agregar sombra horizontal.
• offset-y: Las sombras se agregan verticalmente usando esto.
• color: Las sombras están coloreadas con este parámetro.

Para aclarar estos puntos, pasemos a la sintaxis de la sombra de caída:

Shadow de caída (Offset-X offset-y color)

• offset-x y offset-y pueden ser positivos o negativos.
• En horizontal, se usa un valor positivo para agregar los efectos en el lado derecho, y lo negativo es para el lado izquierdo.
• En vertical, el valor positivo es para el lado inferior, y lo negativo es para la parte superior.
• En el lugar de color, puede asignar cualquier color que desee dar a la imagen.

opacidad()

Opacity () se usa para agregar transparencia a un elemento o cualquier imagen. La sintaxis de la opacidad () es:

opacidad (número);

Aquí "número" ise usa para establecer el nivel de opacidad entre 0.0 a 1.0. Para que una imagen sea completamente transparente, puede configurarla como 0.0.

Para aclarar los puntos de mención anteriores, pasemos al ejemplo.

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

En el siguiente ejemplo, primero agregaremos una imagen usando la etiqueta:

Antes de aplicar la propiedad del filtro, el resultado fue así:

Para cambiar el color de una imagen, pasemos al CSS y apliquemos la propiedad del filtro. Estableceremos la opacidad en 0.5 para la transparencia de la imagen. En la función Drop-shadow (), el valor de offset-x y offset-y es 0 porque solo queremos cambiar el color de una imagen.

.imagen
Filtro: opacidad (0.5) Shadow de caída (0 0 Brown);

Aquí está el resultado final después de la implementación:

El color de la imagen se ha cambiado con éxito.

Conclusión

Para modificar el color de una imagen, se usan dos funciones CSS: Opacity () y Drop-Shadow () con la propiedad del filtro. Opacity () especifica la transparencia de la imagen y la shadow de caída () asigna color y sombra a la imagen. Este artículo explicó el método de cambiar el color de una imagen usando CSS.