有没有办法用css为背景图像着色？就像在，只是图像

Question

所以我有一个<div>，在<div>内有一个background-image图标，大小为15像素，白色，背景透明。有没有办法覆盖图标的白色而不使用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%);
}

但是你必须使用这些值，你可以为它添加饱和度等。

<强> EDIT2：

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

Answer 2

您可以采取以下几种方法：

1. 将您的图标转换为嵌入式SVG，允许您使用CSS fill属性。
2. 将您的图标添加到网络字体，允许您使用CSS font-color属性。

第二种方法将是我首选的方法，并且无论如何都要首先将图像转换为SVG，因此我将对此进行概述。您仅限于单色图标，但通常这不是图标的问题。

步骤1：从位图

跟踪SVG

这两个步骤都是从将位图图像转换为矢量图像开始的。如果您不想手动重新创建，可以使用以下资源：

• Image tracing tutorial for Inkscape。
• Image tracing tutorial for Adobe Illustrator。
• Free online image tracing tool。 （我没有测试过这个！）

第2步：创建图标字体

同样，有很多选项可以使用SVG免费在线工具创建字体，例如IcoMoon，Inkscape's Font Editor，grunt-webfont ...找一个适合你的工具。

我推荐IcoMoon：它会自动创建所有必需的并为您生成样式表，因此您可以跳过第3步！

第3步：生成网络字体资源

要在网络上使用新字体，您需要提供多种不同格式的兼容性，并让浏览器使用a @font-face at-rule了解它们。像Font Squirrel或Fontie这样的工具会为你做这两件事 - 有些人，比如IcoMoon，将它与上一步结合起来。

就是这样！

现在，您可以将图像渲染为伪元素，图标字形为content，并通过更改CSS中的font-color来更改图标颜色。