Para poner una imagen en blanco y negro usando CSS, puedes utilizar la propiedad filter. Esta propiedad te permite aplicar efectos visuales a una imagen, y para convertirla a blanco y negro, puedes usar el filtro grayscale.
Aquí tienes un ejemplo de cómo hacerlo:
Aquí tienes un ejemplo de cómo hacerlo:
Code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagen en Blanco y Negro</title>
<style>
.imagen-blanco-negro {
filter: grayscale(100%);
}
</style>
</head>
<body>
<h1>Imagen en Blanco y Negro</h1>
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen" class="imagen-blanco-negro">
</body>
</html>Explicación del código:
- El filter: grayscale(100%); aplica el efecto de escala de grises al 100%, lo que convierte la imagen a blanco y negro.
- Asegúrate de reemplazar "ruta/de/tu/imagen.jpg" con la ruta real de tu imagen.
Notas:
- Puedes ajustar el valor de grayscale entre 0% y 100% para obtener diferentes niveles de gris.
- Este método es compatible con la mayoría de los navegadores modernos.
