How to change image color in CSS?

HTML & CSS
1

Because of use Font icon so now when use image I have some problems. If I have 3 <div> tags with different background color, then I’ll put the image on these divs. It only work with the first div, and I want to change color of the image to work with other divs but I don’t know how to do that. Check demo code for more details:

http://codepen.io/thehung1724/pen/tbEiv

I don’t want to use many images for each color. Hope anyone can help me out. Thank in advance.

2

I’m confused. What’s wrong with the demo?

An easier way to do this is to add the image as a background to each div in one hit, rather than placing it in the HTML:

div {
    background-image: url(medium-polygon.png);
}

You can still keep the unique background colors on each div as you have them.

3

Hi @ralph-m

I mean that I want to change color of the image base on div background. I don’t want to use many images for each color div background.

4

Hi,

You can’t change the image colour based on the background. You will need to use different images. Oner for the light background and one for the dark background.

If you make it a sprite image (both images combined into a single image) and apply it the background you can just swap the background-position as required.

You could probably draw that icon with CSS for modern browsers and I believe I already drew something similar in one of your other threads.

5

Thank Paul again.