javascript - 在网络中重新着色图像

Question

我正在尝试创建一组按钮(例如单选按钮)，用于显示客户满意度。我想让按钮在未选择时具有灰度图像，然后在选择它们时用颜色饱和(例如，将图像中的白色更改为绿色)。我不想将两个单独的图像与 :active 选择器(或其他选择器)一起使用，只是因为我不想让大量图像弄乱我已经很庞大的元素。我已经看到了一些答案，例如使用标签并对每个单独的像素重新着色，但它们看起来非常复杂和笨拙。有谁知道一个(相对)简单的方法来做到这一点？

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