How do I tint a white image that has a transparent background, using CSS?-CodePudding

I have an image that has:

White pixels: I would like to dynamically set these to any colour
Black pixels: I would like these to remain black
Transparent pixels: I would like these to show through whatever background it is currently on.

Here is an example of the image overlaid on a reddish background:

I would like to be able to tint the bunny any colour I like, without resorting to background tricks because the background colour that the tinted image is shown against, should show through unchanged.

A pure CSS solution is preferred, but javascript image manipulation ideas are also welcome.

The bunny by itself:

CodePudding user response：

Using mask and blend mode you can do it:

.bunny {
  --img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */

  width: 32px;
  aspect-ratio: 1;
  background: var(--img) center/cover;
  background-blend-mode: darken;
  -webkit-mask: var(--img) center/cover;
          mask: var(--img) center/cover;
          
  background-color: red; /* the color */
}

<div ></div>
<div  style="width:100px;background-color:green"></div>
<div  style="width:100px;background-color:blue"></div>