How To Change The Color Of Png Image Using Css

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

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.

Color Of Png 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.
<!-- 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>
Example 2:
 This example use many filter to the image.
<!-- 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>

Related Post