Question

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

是否可以通过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/

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

}

Answer 2

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

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

Answer 3

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

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

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

3 个答案: