如何在没有CSS的情况下更改PNG颜色？

Question

So I have an <img> tag with a .png source and I need to apply a color change to it. I tried the filter property in CSS but apparently it's not supported in IE. Any idea if I can do that with JavaScript?

Answer 1

Maybe you can achieve this in two way:

1. by using different png source files, changing them at the occurrence of an event:

   • with pure JavaScript:

     var image = document.getElementById("my_image");

     image.src = "image_1.jpg";

   • with jQuery:

     $("#my_image").attr("src","image1.jpg");

2. by giving a transparency to your png to show a background-color applied below it:

   • with pure JavaScript:

     var image = document.getElementById("my_image");

     image.style.backgroundColor = "#0000ff"; // or "blue" or "rgba(0, 0, 255, 1.0)"

   • with jQuery:

     $("#my_image").css({ "background-color" : "#0000ff"});

Cheers