Nicht transparenten Bildbereich mit CSS überlagern

Ich bin daran interessiert, ein Bild mit transparentem Hintergrund dynamisch zu ändern und dies mithilfe von CSS zu erreichen.

Was ich eigentlich brauche, ist das Erstellen einer Art Silhouette, so dass allen nicht transparenten Pixeln eine Farbe zugewiesen wird. In diesem Fall Black.

Das Vorher und Nachher sollte ungefähr so aussehen:

Hinweis beide Bilder haben einen transparenten Hintergrund.

Gibt es eine Methode, mit der dies mit CSS durchgeführt werden kann?

Wenn nicht, gibt es eine einfache Möglichkeit, die Silhouette zu generieren und zwischen den beiden Bildern auf der Client-Seite in einem Webseiten-Kontext zu wechseln? Moderne Browser können vorausgesetzt werden.

Jede Art von Hilfe wird sehr geschätzt.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage