CSS cambia el color de la imagen
Implementaremos los diversos ejemplos de estas funciones que la propiedad del filtro CSS proporciona en un archivo HTML.
Ejemplo 1: Uso de la propiedad de filtro con la función invertir para peinar una imagen en un archivo html
En este ejemplo, utilizaremos la función invertir de la propiedad de filtro que invertirá todos los valores de muestra de una imagen. La función invertir puede aceptar todos los valores positivos para el grado de inversión y solo los valores negativos no se aceptan. Esta función de la propiedad del filtro puede cambiar solo el color de una imagen.
En este script, comenzamos abriendo el encabezado del archivo para crear una clase de estilo para el elemento de imagen de la página HTML. En el estilo bajo el nombre de "imagen", creamos una clase donde definimos la propiedad junto con su función que cambia el color de la imagen. Luego, cerramos la etiqueta de estilo y el encabezado del archivo. Después de esto, abrimos la etiqueta del cuerpo donde damos un encabezado usando la etiqueta "H2". La primera imagen es la imagen de color original y no tiene propiedades de estilo, mientras que la segunda imagen es la misma que la primera, pero con el estilo y la clase agregados a su etiqueta. Agregamos las imágenes en el archivo a través de la ruta del archivo usando la palabra clave "SRC". Después de cerrar la etiqueta de imagen, terminamos el archivo cerrando el cuerpo y la etiqueta HTML. Guardamos el archivo en el formato adecuado para que podamos acceder a él en nuestro navegador y recibimos los siguientes resultados:
Como podemos ver en la salida anterior, la imagen de la izquierda tiene todos los colores correctos, mientras que la imagen a la derecha tiene los colores invertidos y se ha transformado en una imagen diferente.
Ejemplo 2: Uso de la propiedad de filtro con la función Sepia para diseñar una imagen en un archivo HTML
En este ejemplo, usamos la función sepia de la propiedad del filtro para cambiar todos los colores en una imagen a un color marrón cálido o amarillo claro. La función sepia acepta todos los valores positivos de conversión de color y rechaza solo los valores negativos. Esta función de propiedad del filtro tiene la capacidad de modificar el color de una imagen por sí mismo. Dentro de la etiqueta de estilo de un archivo HTML, crearemos una clase de estilo única para el elemento de imagen.
En este script, comenzamos accediendo al encabezado del archivo para crear una clase de estilo para el elemento de imagen de la página HTML. En la etiqueta de estilo, construimos una clase donde definimos la propiedad y su método, que altera el color de la imagen. La etiqueta de estilo y el encabezado del archivo se cerrará a partir de entonces. Después de eso, abrimos la etiqueta del cuerpo e insertamos un encabezado usando la etiqueta "H2". Luego, usando el elemento "IMG", colocamos las dos imágenes en nuestra pantalla. La primera imagen es la imagen de color original sin características de estilo, mientras que la segunda imagen es la misma que la primera pero con la clase de estilo incluida en su etiqueta. Usando la palabra clave "src", insertamos las fotos en el archivo a través de la ruta del archivo.
Como se muestra en la salida anterior, la imagen de la izquierda tiene todos los colores correctos. Sin embargo, el de la derecha tiene los colores variados.
Ejemplo 3: Uso de la propiedad de filtro con la función de escala de grises para diseñar una imagen en un archivo HTML
En este ejemplo, utilizaremos la función de filtro de escala de grises para convertir todos los colores en una foto a negro, blanco y gris. Esta función de propiedad del filtro puede alterar el color de una fotografía y transformarlo en una imagen en escala de grises. Desarrollaremos una clase de estilo única para el elemento de imagen dentro de la etiqueta de estilo de un archivo HTML.
En este script, primero ingresamos el encabezado del archivo para generar una clase de estilo para el elemento de imagen de la página HTML. Definimos la propiedad, así como el método para alterar el color de la imagen en una clase. La etiqueta de estilo y el encabezado del archivo se cerrará a partir de entonces. Luego, abrimos la etiqueta del cuerpo e insertamos un encabezado con la etiqueta "H2". Luego, usamos el elemento "IMG" para mostrar las dos imágenes en nuestra pantalla. La primera imagen no tiene características de estilo, mientras que la segunda imagen es la misma que la primera pero con la clase de estilo agregada a su etiqueta. Insertamos las fotografías en el archivo utilizando la palabra clave "SRC" y la ruta del archivo.
La imagen de la izquierda contiene todos los colores originales, como se muestra en la salida anterior. Sin embargo, el de la derecha tiene tonos distintos.
Ejemplo 4: Uso de la propiedad de filtro con las funciones de Opacidad y Sombra Drop para diseñar una imagen en un archivo HTML
En este ejemplo, utilizaremos las funciones de Opacidad y Sombra Drop de la propiedad de Filtro para cambiar todos los colores en una foto. Esta función de propiedad de filtro altera el color de una fotografía y la convierte en una nueva imagen.
En este script, primero agregamos el encabezado del archivo para producir una clase de estilo para el elemento de imagen en la página HTML. Definimos la propiedad, así como el método para alterar el color de la imagen en una clase. La etiqueta de estilo y el encabezado del archivo se cerrará a partir de entonces. Luego, abrimos la etiqueta del cuerpo y usamos la etiqueta "H2" para insertar un encabezado. El elemento "IMG" se usa para mostrar las dos imágenes en nuestra pantalla. La primera imagen no tiene características de estilo, mientras que la segunda imagen es idéntica a la primera, pero con la clase de estilo agregada a su etiqueta. Insertamos imágenes en el archivo utilizando la palabra clave "src" y la ruta del archivo. Cerramos el cuerpo y los elementos HTML una vez que cerramos la etiqueta de la imagen.
La foto de la izquierda contiene todos los colores originales, mientras que la de la derecha ha cambiado los tonos, como se indica en la salida anterior.
Conclusión
Discutimos los varios métodos con respecto al cambio de color de una imagen en un archivo HTML usando CSS. La propiedad CSS más utilizada es la propiedad de filtro que tiene funciones distintas predefinidas que pueden cambiar el color de una imagen y puede darle un aspecto transformado. Implementamos varias de estas funciones en el entorno de BlocePad ++ para comprender mejor cómo funciona esta propiedad con funciones distintas.