El enfoque de este artículo es cambiar el color de una imagen a blanco y negro usando una propiedad de filtro en CSS. Se utiliza para establecer el efecto visual de un elemento. Esta propiedad se usa principalmente en contenido de imagen.
Básicamente, usamos un método de escala de grises() para convertir los colores de los elementos en blanco y negro. El 0% en escala de grises indica el elemento original y el 100% indica el elemento completamente en escala de grises.
Sintaxis:
filter: grayscale(100%)
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change the color of an images
to black and white using CSS?
</title>
<style>
.gfg {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to change the color of an images
to black and white using CSS?
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png" >
<br>
<b>After Convert to Black and White</b> <br>
<img class="gfg" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA