Colorize black on transparent background via CSS

Question

I have a background image, PNG, black on white with transparent white. I'm using it for background on otherwise empty <span> elements with spriting (background position and no repeat). The spans appear as if they have a black image on top of the document background color.

Is there a way, by CSS and/or HTML means, to make the black part of the background image appear in a color, say, in red?

The image is not mine, so replacing black with red statically won't work. Colorizing programmatically during run-time might work, but I was hoping there was a better way.

Targeting WebKit based browsers on iOS and Android. It's not on a website, it's inside a WebView type control inside an app.

EDIT:

.x {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABhJREFUeF5FwjENAAAAg7Apwb/MfdB0ojoHYgB597y2UAAAAABJRU5ErkJggg==");
}

<span class="x"></span>

I want the black dot that comes from the image to be red instead. Or blue.

why does background: red; not work for image tag (assuming you display:block for image) ? — Tilak Maddy, May 30 '20 at 20:17
That would be black on red. I want red on the document's background. — Seva Alekseyev, May 30 '20 at 20:25
share a a code so we can understand your issue. as stated, it seems there is no issue because applying background color will already cover the transparent part — Temani Afif, May 30 '20 at 20:25
I want to replace the color on the **non**-transparent part of the image. — Seva Alekseyev, May 30 '20 at 20:33
Looks close. Now I have to find a way to make that emulate background-position... — Seva Alekseyev, May 30 '20 at 20:59
mask behave exactly the same as background. you have mask-size and mask-position .. you can see that I am using center/contain (position/size) — Temani Afif, May 30 '20 at 21:01
to replace the color of the non-transparent part of the image you will have to use Photoshop or similar tools (at least that's what i would do) — Tilak Maddy, May 31 '20 at 07:20

Colorize black on transparent background via CSS

0 Answers0

Linked