javascript - 有没有办法用 css 给背景图片上色？如，只是图像

Question

所以我有一个 <div> ，并在 <div> 内一个图标 background-image , 15px 大小，白色，背景透明。有什么方法可以使用 JavaScript 和 CSS 覆盖图标的白色，而无需在包含它的 div 中着色？

我已经阅读了一些关于 SO 和 CSS 技巧的解决方案，例如色调叠加(显然不是我的问题的解决方案，因为我只想为图标着色，而不是背景)，以及一些令人困惑的建议错误(将 background-image 与 background-color 结合使用)。

这对我来说似乎微不足道。或者我们还没有 CSS3 吗？

Answer 1

您可以使用 css 过滤器实现此目的。 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

编辑:

举个例子: 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%);
}

但是您必须调整这些值，您可以为其添加饱和度等。

编辑 2:

大多数浏览器也支持它。请参阅:http://caniuse.com/#search=css%20filter