Question

I have this red PNG image that has variable transparency, but I need to display it on the web page as white with variable transparency. I’m thinking there’s only two ways this might work:

• Set the background-color to white, but somehow use the alpha channel of the PNG to set its transparency.
• Somehow de-saturate the PNG or change its color palette to only white.

I’m only allowed to use CSS to achieve this goal; otherwise, I’d look into other options.

Edit: I only need this to work in Safari (webkit). Sorry I didn’t mention this before.

Answer 1

Requested answer:

-webkit-mask can take an image and use it’s alpha channel as mask (pretty much like photoshop mask)

div {
  background:white;
  -webkit-mask:url(url/to/image.png);
}

Fiddle

But I agree with all of the answers suggesting canvas – I know you’re limited to pure css, but canvas is a way to go here.