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
Sign up to request clarification or add additional context in comments.

2 Comments

This could work, however I was hoping to use an image gradient.
Here is a link to a cross-browser css gradient webdesignerwall.com/tutorials/cross-browser-css-gradient
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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.