1

In CSS, is there a standard way to colorize or apply a tint to a grayscale image?

I would like to create a grayscale image to show focus over an element, and allow the color of the focus to be configurable by colorizing the grayscale image.

Thanks

Improve this question

2 Answers 2

Reset to default
5

You could change the alpha and have a solid background color behind it.

Improve this answer
2
0

If you use a gradient with alpha-channel you can use absolute-positioning and put it on-top of your image. If you can't make a gradient with an alpha-channel then you can adjust the opacity of the overlay using CSS, but the effect isn't as good.

I used this for an mouseover area-selection for a map and it worked quite well.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.