Silhouette a PNG image using CSS

Question

Anyone know of a way that I can get CSS to make a PNG image with transparency look completely blacked out like a silhouette?

In other words- Going from something like this:

To this:

It's for a lot of images which is why I'd like to avoid doing it via Photoshop.

Answer 1

You can apply to the image style like filter: contrast(0%) brightness(50%) to get a silhouette. Do not forget prefixes.

Answer 2

I don't see how it could be done with pure css. Javascript might be able to acheive it but you may consider using server side programming instead. With php you could make a duplicate of your original png on the server and replace the non-transparent pixels with a single color. It would be similar to a watermarking function.