在Web中重新渲染图像

Question

我正在尝试创建一组按钮（想想单选按钮），用于显示客户满意度。我想让按钮在未被选中时具有灰度级的图像，然后在选择时使用颜色（例如，将图像中的白色变为绿色）饱和。我不想使用两个单独的图像：活动选择器（或其他选择器），因为我不想让大量的图像混乱我已经很大的项目。我已经看到了一些答案，例如使用标签并重新着色每个像素，但它们看起来非常复杂和笨拙。有没有人知道（相对）简单的方法来做到这一点？

Answer 1

您可以使用CSS过滤器，但目前只有Chrome和Safari支持它们。

img:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

你可以在jsFiddle上看到一个演示：http://jsfiddle.net/rvb250hx/。我认为它也可以用于单选按钮。

http://www.paulund.co.uk/css3-image-filters

Answer 2

你可以使用透明的PNG图像，所以每当你想要改变颜色时，你只需要为它设置css。

参见[this] [1]小提琴链接。

  [1]: http://jsfiddle.net/chiragchavda_ks/okkyn431/