6

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

是否可以通过 CSS 给这样的图像着色？我会梦想让我玩弄图像或元素的饱和度和色调的东西。

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

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

这不是我想做的：jQuery：有一种方法可以将颜色（色调）应用于图像？

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

4

3 回答 3

7

有办法，您可以在下面的链接上阅读全文，但那是 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 */ 

}
于 2012-08-18T15:32:52.087 回答
1

您可以在图标顶部添加一个伪元素。rgba()

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

于 2012-08-18T15:44:16.683 回答
0

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

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

于 2012-08-18T16:21:12.220 回答