I want to apply filter: grayscale(100%); onto two <img> and it works fine for the first image which is actually a picture. With the class applied, the picture becomes gray.

But the same thing doesn't happen with the second image, which is an icon with only one color in it (black).

The img 1 is an external image hosted outside of my folder but the img 2 is hosted in my folder under /assets. They both load correctly.

Both images are .png

I tried on Mozilla and Chrome

HTML <img id="1" class="gray" src="someUrl" /> <img id="2" class="gray" src="someOtherUrl" /> CSS .gray { filter: grayscale(100%); }

output:
img 1 = grey
img 2 = remains black no matter what

I also removed any other class applied to the <img> just in case and checked in the devtool no inherited class were the problem.
I also tried with -webkit-filter: grayscale(100%);

I just don't understand. Is there any chance it has to see with the img2 being monochromatic? Is there something i am missing ?

LeSmoox's user avatar

8

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.