可以使用 CSS 为灰度图标着色吗？答案

【问题标题】：Can CSS be used to tint a gray level icon?可以使用 CSS 为灰度图标着色吗？
【发布时间】：2012-08-18 15:29:01
【问题描述】：

我的 web 应用上有一些图标是灰色的，背景是透明的。

是否可以通过 CSS 为这样的图像添加色调？我会梦想有什么东西可以让我玩转图像或元素的饱和度和色调。

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

这是我想着色的图像类型：http://www.clker.com/clipart-transparent-arrow.html

这不是我想做的：jQuery: there is a way to apply colour (tint) to an image?

一种解决方法是使用 JavaScript http://www.pixastic.com/lib/

【问题讨论】：

你有什么图像，你希望它看起来像什么？
问题中有一个示例图片链接。我希望能够在 CSS 中更改它是绿色、橙色还是紫色。
是的，但这不是你的图像，尽管它至少展示了你想要的东西。不过，理想情况下，问题应该是独立的，因为如果该页面死掉或被移动，那么问题就会变得有些荒谬。

标签： css

【解决方案1】：

有办法，你可以在下面的链接上阅读全文，但那是 CSS3，可能不适用于某些旧浏览器

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

一些例子

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 */ 

}

【讨论】：

最好提供答案而不是答案的链接，它可能会消失并使您的答案与时间无关。
是的，你是对的，我总是在初次发帖后编辑我的问题，无论如何，很多人都这样做;)
PS : 这只是摇滚（在我的情况下兼容性不是主要问题）
很高兴为您提供帮助，但也有 firefox css 属性，我会尽快添加它们
...这很酷，但根据caniuse.com/#search=filter确实不兼容

【解决方案2】：

您可以为您的图标添加a pseudo-element with rgba() on top。

此外，如果使用 unicode 字符而不是图像，您也可以使用 rgba() 或 hsla()。

【讨论】：

正如我的问题中提到的那样，这不是我想要实现的目标。
如果使用图标字体或 Unicode 字符而不是图像，您可以使用任何颜色值，而不仅仅是 rgba() 或 hsla()。这是使用 CSS 实现的最简单的方法。
当然，我从来没有说过你不能使用另一种颜色值。你甚至可以尝试文字屏蔽lea.verou.me/2012/05/text-masking-the-standards-way

【解决方案3】：

你可以使用灰度jQuery插件，非常好用，好用

http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/

【讨论】：