Estoy interesado en modificar dinámicamente una imagen con fondo transparente y lograr eso usando CSS.

Lo que realmente necesito es crear una especie de silueta, para que todos los píxeles no transparentes tengan un color aplicado. En este caso, negro.

El antes y el después deberían verse así:

Tenga en cuenta que ambas imágenes tienen un fondo transparente.

¿Hay algún método que pueda usarse para realizar esto usando CSS?

Si no, ¿hay una manera fácil de generar la silueta y cambiar entre las dos imágenes, en el lado del cliente, en el contexto de una página web? Se pueden suponer navegadores modernos.

Cualquier tipo de ayuda es muy apreciada.