CSS可用于着色灰度图标吗？

Question

我的webapp上有一些图标是灰色的,背景是透明的.

是否可以通过CSS为这样的图像添加色调？我会想到让我玩饱和度和图像或元素色调的东西.

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

这是我想要的颜色图像:http://www.clker.com/clipart-transparent-arrow.html

这不是我想要做的:jQuery:有一种方法可以将颜色(色调)应用到图像中吗？

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

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

}