How to change color of PNG image using CSS?
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. 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();
Example 1: This example use grayscale filter to change the colored image into grayscale image.
<!DOCTYPE html>
< html >
< head >
< title >Convert into grayscale image</ title >
< style >
img {
filter: grayscale(10);
}
</ style >
</ head >
< body >
< h2 >Grayscale Image</ h2 >
< img src =
width = "500px" height = "250px" alt = "filter applied" />
</ body >
</ html >
|
Output:
Original Image:
After applying filter:
Example 2: This example use many filter to the image.
<!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 =
width = "500px" height = "250px" alt = "filter applied" />
< img class = "image2" src =
width = "500px" height = "250px" alt = "filter applied" />
</ body >
</ html >
|
Output:
Last Updated :
12 Feb, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...