CODEWITHSUNDEEP
htmlcss
Woyzeck
Woyzeck

Reputation: 115

Colorize Background-Image

I need to colorize a post-it image (like this one here ) depending on a rgb-Value.

My problem is the following: The outer parts of the image need to be transparent as the image is placed in front of different background-colors.

Second, I need the currently yellow color of the image changing to the given rgb-value. (not animated)

I first thought about making the yellow part of the image transparent, too and put a colorized element beyond it. But this would colorize the outer parts as well which should stick to the documents background-color.

Any ideas on that?

Thanks in advance, Woyzeck

Upvotes: 1

Views: 133

Answers (2)

Woyzeck
Woyzeck

Reputation: 115

Thanks for your fast suggestions!

I'm sure they would work as well. But I came across another good solution that works for me here.

Completely CSS, but of course it doesn't use an image as I was trying before.

Upvotes: 0

Michael Mior
Michael Mior

Reputation: 28762

You could do this by tinting the image drawn in a <canvas> element. (See here for an example) and then generating a data URI you can use to show the image.

Not sure this can be done with pure CSS, but I'd love to be proven wrong :)

Upvotes: 1

Related Questions