Search code examples
csswebkitpngtransparencyalpha

Using only CSS, can I use only the alpha channel of a PNG?

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.

Solution

  • 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.