How to change the Color of PNG Image With CSS
×

How to change the Color of PNG Image with CSS? Filter property explained

0 279

In this tutorial, we will explain how to change the color of the PNG image with the help of CSS. We will be using the Use the filter function to change the color of a png image in CSS.

The "filter property" is primarily used to set the visual effect of the image. There are many values of the filter property which are listed below for reference. Users can use the values as per the desired effect. 

Note:

Filters are only supported in modern browsers. Old browsers do not support it. Use webkit-filter in modern browsers.

Syntax:

Filter property has the following values which can be used as per the requirement.

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

In the below sample code we are using saturate(), sepia() for conceptual understanding.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title> How to Change the Color of PNG Image With CSS </title>
    <style>
     .mid
    {
     width: 50%;
     margin: 0px auto;
     font-family: Verdana,Geneva,sans-serif;
     padding: 10px;

    }
     .mid h1
     {
      font-family: Verdana,Geneva,sans-serif;
      font-size: 17px;
      color: #000;


     }

       img  {
                width:25%;
                float:left;
            }
            .image1 {
                filter: saturate(0.5);
                -webkit-filter: saturate(0.5);
            }
            .image2 {
                filter: sepia(100%);
                -webkit-filter: sepia(100%);
            }
            .image3 {
                -webkit-filter: hue-rotate(180deg);
                  filter: hue-rotate(180deg);
            }


    </style>
  </head>
  <body>

    <div class="mid">
    <h1> Change the Color of PNG Image With CSS </h1>
         <img class = "image1" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

        <img class = "image2" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

          <img class = "image3" src=
"https://www.codingtag.com/img/code-1.png"
         alt="filter applied" />

    </div>
  </body>
</html>

Output:

With the above example, we have learned how to change the image color using CSS filter property.

I hope you enjoyed this tutorial, please leave your comments below and don't forget to subscribe to our website for more such topics.



Share:


Discount Coupons



Leave a Reply


Comments
    Waiting for your comments