CSS能用来给灰色图标上色吗？

Question

CSS能用来给灰色图标上色吗？

css

6

我在我的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/

- AsTeR

你有什么样的图像，想要在色调处理后呈现出什么样的效果？ - David Thomas

问题中有一个示例图片链接。我希望能够在 CSS 中更改它是绿色、橙色还是紫色。 - AsTeR

是的，但那不是你的图像，尽管它至少展示了你想要的东西。然而，理想情况下，问题应该是自包含的，因为如果该页面消失或被移动，那么问题就变得有些无意义。 - David Thomas

3个回答

1

您可以在图标上方添加一个带有rgba()的伪元素。

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

- Ana

正如我在问题中提到的那样，这并不是我想要实现的。 - AsTeR

如果使用图标字体或 Unicode 字符代替图像，则可以使用任何颜色值，而不仅仅是 rgba() 或 hsla()。这是使用 CSS 最简单的方法。 - BoltClock

当然，我从未说过您不能使用其他类型的颜色值。您甚至可以尝试文本遮罩http://lea.verou.me/2012/05/text-masking-the-standards-way/。 - Ana

0

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

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

- Razmig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Milan Jaric · Accepted Answer

以下是需要翻译的内容：

这有一个方法，你可以在下面的链接上阅读完整的故事，但这是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 */ 

}