Is there any way to color the background image using css? Like in, only image

Question

So, I have <div>, and inside the <div>icon is like background-image, 15px in size, white, with a transparent background. Is there a way to override the white color of an icon without coloring in the div that contains it using JavaScript and CSS?

I read several solutions for SO and CSS tricks, such as blending shades (obviously this is not a solution to my problem, because I just want the icon to be color, not the background) and some suggestions that were puzzled and (using background-imagein combined with background-color).

This seems trivial to me. Or are we not yet with CSS3?

Answer 1

, :

• SVG, CSS fill.
• -, CSS font-color.

, -, SVG , . , .

1: SVG

, . , :

• Inkscape.
• Adobe Illustrator.
• - . ( !)

2:

, -, IcoMoon, Inkscape, grunt-webfont... , .

IcoMoon: , 3!

3: -

, , a @font-face at -. , Font Squirrel Fontie , , IcoMoon, .

!

content , font-color CSS.

Answer 2

css-. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Edit:

: http://jsfiddle.net/j0k7sr9x/1

<div id="container">
    <div id="background">

    </div>
</div>

#background{
    background-image: url("http://s24.postimg.org/es9caxnbl/Untitled_1.png");
    width:50px;
    height:50px;
    filter: invert(60%) sepia(100%) hue-rotate(-45deg) saturate(500%);
}

, ..

EDIT2:

. .: http://caniuse.com/#search=css%20filter