Actually I didn’t find any cross-browser way to colorize a image by CSS.
why we need this? actually I am building a theme and used some map and icons in the theme, when I am creating different color scheme of the theme I thought how about it if I can change the color of the map without using more image?
Don’t worry we will use the transparency feature of PNG file.
Hope you have Photoshop or its cool if you are using GIMP. Open it and open the image. Make transparent the area which will be colorized and fill the other area with background color of your site.
Click here to see the image.
And example is below. I have applied green color via CSS and its working.
———————————————————————————————————————-
Just add a background color via CSS, below a example with inline CSS,
<img style="background: #84B231;" alt="" src="http://asifsaho.me/app/uploads/2013/07/transparent-BangladeshMap.png" width="283" height="285" />
Ceers!