有没有一种方法可以使用CSS为背景图像着色？就是说，只着色图像。

Question

我有一个 <div>，里面有一个图标作为 background-image，大小为15px，颜色为白色，背景透明。是否有办法在不对包含它的

着色的情况下覆盖图标的白色颜色？可以使用JavaScript和CSS吗？

我已经阅读了一些关于此问题的解决方案，例如在SO和CSS Tricks中使用色调叠加（显然不是我的问题的解决方案，因为我只想涂色图标，而不是背景），以及一些令人困惑和错误的建议（在background-color并用background-image）。

这对我来说似乎很微不足道。或者我们还没有达到CSS3的水平？

- user5102448

---

CSS并不是直接修改图像的工具。HTML5中的<canvas>更有可能成为解决方案的候选。 - MartyIX

哎呀，这会让事情变得有点复杂。我熟悉画布(Canvas)。但是尝试我正在做的事情可能需要很多混乱的代码。真的没有使用CSS和/或JavaScript的方法吗？ - user5102448

我可以编辑您的图像，将其转换为带有透明空白的.png格式。 - Adam Buchanan Smith

@Gaweyne 抱歉，我误读了你的问题 :) 现在明白了。 您想动态地为图标着色，而不是使用多个不同颜色的图像。您能将您的图像转换成SVG或者字体吗？ - Drew R

哦！如果这也能在Mozilla和Safari上运行，那就太好了。那将是解决方案。对于我的项目，完全不必担心IE。 - user5102448

Answer 1

你可以使用CSS滤镜实现这一点。 https://developer.mozilla.org/zh-CN/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

- godzsa

---

@AdamBuchananSmith 是的，你可以。 - godzsa

@godzsa 你刚刚完全相反地做了op要求的事情。他需要图标有颜色，而不是透明的背景伙计。 - Banana

如果您能使圆形本身变为红色，而不是容器和图像的背景，则我会给您点赞。 - Banana

@AdamBuchananSmith OP说图标有透明背景，这在.jpg格式中是不可能的，因此OP必须使用.gif或.png格式，我的解决方案将适用于两种格式。 - godzsa

非常好的解决方案，但是1）与简单的十六进制RGBA颜色不同，值过滤器对我的特定项目造成了问题；2）根据Mozilla文档，这个解决方案还处于实验阶段。不能冒险使用它。 :o - user5102448

Answer 2

你可以采用以下几种方法来解决这个问题：

1. 将图标转换为嵌入式SVG，以便使用CSS的fill属性。
2. 将图标添加到Web字体中，以便使用CSS的font-color属性。

第二种方法是我首选的方法，并且需要先将图像转换为SVG，因此我将提供概述。不过，您只能使用单色图标，但通常对于图标来说这并不是问题。

步骤1：从位图中跟踪SVG

这两个步骤都始于将位图图像转换为矢量图像。如果您不想手动重新创建它，这里有一些资源可供参考：

• Inkscape图像跟踪教程。
• Adobe Illustrator图像跟踪教程。
• 免费在线图像跟踪工具。（我没有测试过！）

步骤2：创建图标字体

再次提醒，有许多选项可以从SVG创建字体，如免费在线工具IcoMoon, Inkscape的字体编辑器, grunt-webfont... 找到适合自己的工具。

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

步骤3：生成Web字体资源

要在网页上使用您的新字体，您需要以几种不同的格式提供它以实现兼容性，并使用@font-face at-rule通知浏览器。像Font Squirrel或Fontie这样的工具可以为您完成这两个步骤，而一些工具（例如IcoMoon）则将此与前一个步骤结合起来。

就是这样！

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

- Jordan Gray

---

我最终做了一些略微不同的事情，但这是迄今为止最简单的解决方案。我以前在一个非常老的项目上做过这个，而且它起作用了。这次没有想到是因为我必须在工作中的离线机器上开发。 - user5102448

@Gaweyne 等等，你的意思是你正在为开发机器（可以理解）还是正在与机器一起开发？我真心希望是前者！:) - Jordan Gray

@Gaweyne 另外，出于兴趣，你最终做了什么？ - Jordan Gray

抱歉耽擱了。發現有其他人正在處理這個應用程序。他們在GIMP中製作了透明背景和不透明圖標形狀的圖像，因此當您使用CSS更改圖像的背景顏色時，圖標將是您想要的任何顏色。這不是一個基於代碼的解決方案，而是一個圖形設計解決方案。 - user5102448