1

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 :)

DragonGamer
  • 834
  • 3
  • 9
  • 27

1 Answers1

1

Only with filter 

filter: hue-rotate(90deg);

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

c-smile
  • 26,734
  • 7
  • 59
  • 86