Estos son los resultados de este artículo:
¡Empecemos!
Cambiar el color de la imagen en CSS
Para cambiar el color de la imagen en CSS, primero aprenda sobre la propiedad de filtro y sus funciones. Obtendrá una mejor comprensión de esta manera.
filtrar la propiedad CSS
Para controlar el efecto visual de una imagen se utiliza la propiedad de filtro de CSS. Los efectos visuales son:
- difuminar
- brillo
- ajuste de color
- sombra paralela
- opacidad
Sintaxis de propiedad de filtro
La sintaxis de la propiedad de filtro es:
filtrar : difuminar ( ) | sombra paralela ( ) | opacidad ( )- difuminar(): se utiliza para aplicar efecto de desenfoque en la imagen.
- sombra paralela(): crear una sombra sobre una imagen.
- opacidad(): Se utiliza para añadir transparencia a la imagen.
Podemos usar múltiples filtros usando esta propiedad de filtro. Este artículo trata sobre cómo cambiar el color de la imagen, así que aquí explicaremos cómo usar las funciones drop-shadow() y opacity() con ella.
sombra paralela()
drop-shadow() es una función integrada de CSS que permite configurar la sombra de cualquier elemento o imagen. Los siguientes parámetros se utilizan en la función drop-shadow() para cambiar el color de una imagen:
- desplazamiento-x: Se utiliza para añadir sombra horizontal.
- desplazamiento-y: Las sombras se agregan verticalmente usando esto.
- color: Las sombras se colorean con este parámetro.
Para aclarar estos puntos, pasemos a la sintaxis de drop-shadow:
sombra paralela ( desplazamiento-x desplazamiento-y color )- offset-x y offset-y pueden ser positivos o negativos.
- En horizontal, el valor positivo se usa para agregar los efectos en el lado derecho y el negativo es para el lado izquierdo.
- En vertical, el valor positivo es para el lado inferior y el negativo para el 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 opacity() es:
opacidad ( número ) ;Aquí “ número ” i Se utiliza para establecer el nivel de opacidad entre 0,0 y 1,0. Para hacer que una imagen sea completamente transparente, puede configurarla como 0.0.
Para aclarar los puntos mencionados anteriormente, pasemos al ejemplo.
¿Cómo cambiar el color de la imagen en CSS?
En el siguiente ejemplo, primero agregaremos una imagen usando la etiqueta :
< imagen clase = 'imagen' origen = 'imagen.jpg' todo = '' >
< / cuerpo >
Antes de aplicar la propiedad de filtro, el resultado era así:
Para cambiar el color de una imagen, pasemos al CSS y apliquemos la propiedad de 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 {filtrar : opacidad ( 0.5 ) sombra paralela ( 0 0 marrón ) ;
}
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 utilizan dos funciones CSS: opacity() y drop-shadow() con la propiedad filter. opacity() especifica la transparencia de la imagen y drop-shadow() asigna color y sombra a la imagen. Este artículo explica el método para cambiar el color de una imagen usando CSS.