在Web中重新着色图像

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

来源

2015-07-05 WookieCoder

可能重复的问题：http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – ruslan4kad

他们是相似的，但有几个关键的不同之处。我愿意使用jQuery或Javascript，而他们正在专门寻找一种CSS方法。此外，他们接受的回应仅适用于特定的浏览器。 – WookieCoder

您可以使用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

来源

2015-07-05 21:19:47

我不打算接受这个答案（因为我想要一个适用于所有浏览器的答案），但这非常棒，在Chrome和Safari浏览器中完美运行！如果我没有找到更好的答案，我会完全使用它 – WookieCoder

当然 - 您可以使用不透明度滤镜和黑色背景，随时随地淡入/淡出。这是更多的代码，但它会产生类似的效果。 –

http://jsfiddle.net/rvb250hx/1/请参阅jsFiddle。它有点给你想要的，但我建议使用过滤器，然后这作为CSS后备？ –

你可以只使用PNG图片是透明的，所以每当你想改变颜色，你只需要设置的CSS像。

请参阅[this] [1]小提琴链接。与

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

来源

2015-07-06 04:49:05

在Web中重新着色图像

回答

相关问题