Dada una imagen en color y la tarea es convertir la imagen en una imagen en escala de grises usando la propiedad CSS. En CSS, la propiedad de filtro se usa para convertir una imagen en una imagen en escala de grises. La propiedad de filtro se utiliza principalmente para establecer el efecto visual de una imagen.
Sintaxis:
filter: grayscale()
Ejemplo 1: En este ejemplo, use filter: grayscale(100%) para convertir una imagen en escala de grises.
<!DOCTYPE html>
<html>
<head>
<title>Convert into grayscale image</title>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Grayscale Image</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px" height="250px" alt="filter applied" />
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>Convert into grayscale image</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Grayscale Image</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px" height="250px" alt="filter applied" />
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamshrikantjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA