在透明图像上应用混合模式

Question

使用CSS，我试图混合一个颜色的背景图像。该图像是带有半透明部分的PNG。如何将混合模式只应用于实际可见的部分，所以如果PNG有一个洞，后面的元素可以在那里看到不受阻碍?

代码:

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

会导致不透明的颜色与顶部的图像混合。图像的全半透明像素包含背景色，而不是在结果上是半透明的。

谁知道怎么解决这个问题?提前感谢:)

Answer 1

仅使用过滤器

filter: hue-rotate(90deg);

和sepia(NN%)。没有其他选项，只能在支持它的浏览器中使用。