Dada una imagen y la tarea es cambiar el color de la imagen usando CSS. Use la función de filtro para cambiar el color de la imagen png. La propiedad de filtro se utiliza principalmente para establecer el efecto visual en la imagen. Existen muchos valores de propiedad para la función de filtro.
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Ejemplo 1: este ejemplo usa un filtro de escala de grises para cambiar la imagen en color a una imagen en escala de grises.
<!-- HTML code to change the png image color
using filter property -->
<!DOCTYPE html>
<html>
<head>
<title>Convert into grayscale image</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>Grayscale Image</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>
Salida:
Imagen original: 
Después de aplicar el filtro:
Ejemplo 2: Este ejemplo usa muchos filtros para la imagen.
<!-- HTML code to change the png image color
using filter property -->
<!DOCTYPE html>
<html>
<head>
<title>Convert image into different color</title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shivangsharma15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA