问题描述:

I am trying to create a group of buttons (think radio buttons) which will be used to display customer satisfaction. I want to have the buttons have images which are gray scale when they are un-selected, and then saturate with a color (ex. change the white in the image to green) when they are selected. I don't want to use two separate images with a :active selector (or other selector) simply because I don't want to have a ton of images cluttering up my already hefty project. I have seen a few answers, for instance using a tag and recoloring each individual pixel, but they seemed incredibly complex and unwieldy. Does anyone know a (relatively) simple way to do this?

网友答案:

You could use CSS Filters, but they're only supported by Chrome and Safari at the moment.

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

You can see a demo here on a jsFiddle: http://jsfiddle.net/rvb250hx/. I'd assume it can be used for radio buttons too.

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

网友答案:

You can just use PNG image with are transparent, so whenever you want to change color you just have to set css for that like.

See [this][1] fiddle link.

  [1]: http://jsfiddle.net/chiragchavda_ks/okkyn431/
相关阅读:
Top