CSS可以用来给灰度图标着色吗？

我的webapp上有些图标是灰色的，背景是透明的

有没有可能通过CSS给这样的图像着色？我会梦想一些东西，让我玩饱和度和色调的图像或元素

如果它不存在，是否正在讨论未来版本的CSS

这是我想要的图像颜色：

这不是我想做的：

---

一种解决方法是使用JavaScript，你们可以在下面的链接上阅读完整的故事，但这是CSS3，在一些旧的浏览器上可能不起作用

一些例子

img.icon {
      -webkit-filter: sepia(78%);
}

img.icon {
      -webkit-filter: grayscale(100%);  /* safari/chrome */
      -moz-filter: grayscale(100%); /* firefox */
      -ms-filter: grayscale(100%);  /* IE >= 9 */
      -o-filter: grayscale(100%); /* Opera, if support CSS3 */
      filter: gray; filter: grayscale(100%); /* edge browsers */ 

}

你可以添加你的图标

---

此外，如果使用unicode字符而不是图像，您也可以使用

rgba（）

或

hsla（）

。

您可以使用greyscale jQuery插件，它非常有用且易于使用

---

您有什么图像，以及您希望它在着色后看起来像什么？问题中有一个示例图像链接。我希望能够在CSS中改变它是绿色、橙色还是紫色。是的，但这不是你的图像，尽管它至少展示了你想要的东西。但是，理想情况下，问题应该是独立的，因为如果该页面消失或被移动，那么问题就变得有些荒谬。最好提供答案，而不是答案的链接，它可能会消失，并使你的答案与时间无关。是的，你是对的，无论如何，我总是在第一篇帖子之后编辑我的问题，很多人这样做；）PS：这只是岩石（兼容性不是一个主要问题在我的情况下）很乐意帮助，但也有firefox的css属性，我会添加他们很快回答。。。这很酷，但根据我的问题中提到的，这并不是我想要实现的。如果使用图标字体或Unicode字符而不是图像，您可以使用任何颜色值，而不仅仅是

rgba（）

或

hsla（）

。这是使用CSS的最简单的方法。当然，我从来没有说过你不能使用另一种颜色值。你甚至可以尝试文本屏蔽