Posted By
Bajarangi soft ,
Posted On 09-10-2020
There are many property value exist to the filter function.
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
<!-- 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=
"b2.jpg"
width="500px" height="250px" alt="filter applied" />
</body>
</html>
<!-- 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=
"logo.jpg"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"logo.jpg"
width="500px" height="250px" alt="filter applied" />
</body>
</html>