Apply Blend-Mode on transparent image

Question

using CSS, i'm trying to blend a background-image with a color. The image is a PNG with translucent parts though. How can I apply a blend-mode only to the actually visible parts, so if the PNG has a hole, the elements lying behind can be seen unobstructed there?

Codes like:

background-image: url("Scales/Scale1.png");
background-color: rgba(0, 0, 255, 1);
background-blend-mode: luminosity;

result in an opaque color blending with the image ontop. Fully translucent pixels of the image contain the background-color instead of being translucent on the result.

Anyone having an idea how to solve this? Thanks in advance :)

Answer 1

Only with filter

filter: hue-rotate(90deg);

and sepia(NN%) probably. No other options and only in browsers that support it.