[FIXED] How do I tint a white image that has a transparent background, using CSS?

Issue

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:

Solution

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 class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>

Answered By - Temani Afif

Answer Checked By - Senaida (PHPFixing Volunteer)