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

【问题标题】：Apply Blend-Mode on transparent image在透明图像上应用混合模式
【发布时间】：2015-09-05 02:28:48
【问题描述】：

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

代码如下：

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

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

有人知道如何解决这个问题吗？在此先感谢:)

【问题讨论】：

【解决方案1】：

仅限filter

filter: hue-rotate(90deg);

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

【讨论】：