Javascript 有没有办法用css给背景图像上色？如图所示，只是图像

因此，我有一个

，在

内有一个图标作为

背景图像，大小为15px，白色，背景透明。是否有任何方法可以使用JavaScript和CSS覆盖图标的白色而不在包含它的div中着色

我已经阅读了一些关于SO和CSS技巧的解决方案，例如着色覆盖（显然不是我问题的解决方案，因为我只想让图标上色，而不是背景），以及一些令人困惑和错误的建议（将
背景图像
与
背景色
结合使用）

这对我来说似乎微不足道。或者我们还没有使用CSS3吗？
您可以使用css过滤器实现这一点。

编辑：

他举例说：


#背景{
背景图像：url（“http://s24.postimg.org/es9caxnbl/Untitled_1.png");
宽度：50px；
高度：50px；
过滤器：反转（60%）深褐色（100%）色调旋转（-45度）饱和（500%）；
}

然而，你必须玩周围的价值观，你可以添加饱和度等

EDIT2:

大多数浏览器也支持它。请参阅：
您可以采取以下几种方法：

将图标转换为嵌入式SVG，允许您使用CSS
fill
属性
将图标添加到web字体，允许您使用CSS
font-color
属性
第二种方法是我的首选方法，它首先涉及将图像转换为SVG，因此我将对此进行概述。您仅限于使用单色图标，尽管对于图标来说这通常不是问题

步骤1：从位图跟踪SVG
这两个步骤都是从将位图图像转换为矢量图像开始的。如果您不想手动重新创建，请参阅以下资源：




。（我还没有测试过！）

步骤2：创建图标字体
同样，SVGs免费在线工具有许多创建字体的选项，如，…查找适合您的工具

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

步骤3：生成web字体资产
要在web上使用新字体，您需要提供几种不同格式的字体，以确保兼容性，并让浏览器了解它们的使用情况。像或这样的工具将为您和一些人（如IcoMoon）完成这两项工作，并将此与上一步结合起来

就这样！
现在，您可以将图像渲染为伪元素，图标图示符为
content
，并通过更改CSS中的
字体颜色来更改图标颜色
 CSS实际上不是一个直接修改图像的工具<代码>
在HTML5中更可能是解决方案的候选者。这会使问题变得有点复杂。我对帆布很熟悉。但可能需要大量混乱的代码来尝试我正在做的事情。CSS和/或JavaScript真的没有办法吗？我会编辑你的图像，将其转换为带有透明空白的.png。出于好奇，为什么不使用容器？@Gaweyne抱歉，我误读了你的问题：）现在有意义了。您希望动态地为图标着色，而不是使用多个不同颜色的图像。你能把你的图像转换成SVG或者字体吗？也是实验性的。可能是我的项目的一个好主意无论是否可以通过过滤器实现，你都应该在答案中给出一个例子。如果某一天链接页面出现问题，粘贴一个没有解释的外部链接将使答案无效。@adambuchanemissh yes youcan@godzsa你只是做了与op要求完全相反的事。根据mozilla文档，他需要的是图标颜色，而不是透明背景，这是一个很好的解决方案，但1）与简单的十六进制rgba颜色相反，过滤器所取的值会给我的特定项目带来问题，2）解决方案的实验性质。不能冒险使用这个我最终做了一些稍有不同的事情，但这是迄今为止最简单的解决方案。我以前在一个非常老的项目上做过这个，它成功了。我不介意这样做，因为我必须在脱机机器上进行开发。@Gaweyne等等，你是说你开发的机器（可以理解）还是你开发的机器？我真的希望是前者！：）@还有，出于兴趣，你最后做了什么？抱歉耽搁了。发现该应用程序的其他工作人员已将其覆盖。他们用gimp制作了这些图像，背景是透明的，中间有一个不透明的图标形状。因此，当您使用css更改图像的背景色时，图标将是您想要的任何颜色。不是真正的基于代码的解决方案，而是图形设计解决方案。
<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%);
}