Las imágenes en escala de grises consisten en color negro, gris y blanco. Más específicamente, el color gris tiene múltiples niveles de tonos. En HTML, los usuarios pueden convertir la imagen en una escala de grises con la ayuda del CSS "filtrar" propiedad. La propiedad del filtro se usa principalmente para definir y establecer el efecto visual de una imagen, como la representación de imágenes, fondos y bordes.

En este tutorial, demostraremos cómo convertir una imagen a escala de grises en HTML/CSS

Cómo convertir una imagen a escala de grises en HTML/CSS?

Para convertir una imagen a escala de grises en HTML/CSS, siga las instrucciones dadas.

Paso 1: Agregue un contenedor Div

Primero, agregue un contenedor DIV en el documento HTML utilizando el "" etiqueta. Luego, asigna un "claseAtributo con un valor específico. Por ejemplo, "IMG-GRAYScALE"Se usa para atributos de clase.

Paso 2: insertar encabezados

A continuación, agregue el encabezado de primer nivel usando el "

"Tag, luego incruste el encabezado del nivel dos con la ayuda de"

Paso 3: Agregar imagen

Después de eso, agregue una imagen usando el ""Etiqueta junto con los atributos requeridos:

• El "SRC"El atributo se usa para agregar una URL de la imagen.
• "altura"Se utiliza para configurar la altura de la imagen en un contenedor.
• "ancho"Define el tamaño de la imagen horizontalmente.
• "alternativo"Se utiliza para agregar el texto que se mostrará si la imagen no se carga debido a algunas razones:

Creadores de contenido de Linuxhint

Imagen en escala de grises

Producción

Paso 4: Atributo de clase de acceso

Acceda al atributo de clase con la ayuda de ".IMG-GRAYScALE"Y aplica el"texto alineado"Propiedad para establecer la alineación del texto.

Paso 5: encabezado de estilo

Aplica el "color"Propiedad en el encabezado accediendo a él con el nombre de la etiqueta"H1".

Paso 6: convertir la imagen en escala de grises

Ahora, acceda a la imagen utilizando el "img":

.IMG-GRAYSCALE
Text-Align: Center;

H1
Color: RGB (83, 21, 197);

img
Filtro: escala de grises (100%);

Aplica el "filtrar"Propiedad y establecer el valor"escala de grises (100%)"Para convertir la imagen en una escala de grises.

Producción

Se puede notar que la imagen se ha convertido en una imagen en escala de grises:

Hemos declarado el método para convertir una imagen en escala de grises en HTML/CSS.

Conclusión

Para convertir una imagen a escala de grises en HTML y CSS, agregue una imagen en un contenedor con la ayuda del "" etiqueta. Luego, acceda a la imagen en CSS por nombre de la etiqueta y aplique el "filtrar"Propiedad con el valor"escala de grises (100%)". Esta publicación ha demostrado el método más fácil para convertir una imagen a escala de grises en HTML usando CSS.