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

Question

使用 CSS，我正在尝试将背景图像与颜色混合。该图像是带有半透明部分的PNG。我怎样才能将混合模式仅应用于实际可见的部分，所以如果 PNG 有一个洞，那么可以看到后面的元素在那里畅通无阻？

像这样的代码：

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

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

有人知道如何解决这个问题吗？提前致谢：）

score 1 · Accepted Answer

filter: hue-rotate(90deg);

并且sepia(NN%)可能。没有其他选项，仅在支持它的浏览器中。

1 回答 1