css混合模式的操作结果

我正在使用混合模式根据背景翻转图像的颜色。 到目前为止还不错，但是如果背景是颜色而不是灰色或黑色/白色。结果变得五彩缤纷。 我知道这就是混合模式：差异的工作原理

但我想对效果进行灰度化。 不幸的是，文件管理器是在混合之前应用的。 有没有办法操纵结果

预期的结果是牙齿不着色，而是亮度倒置

我又创作了一支钢笔： 你可以把魔鬼拖到这里来。 它在黑白两色上都很好用

但是在彩色背景下，我无法在计算混合后对魔鬼本身进行灰度化。

.bg，.front{
保证金：0自动；
宽度：300px；高度：300px；
背景：线性梯度（至底部，#9f9 50%，#090 50%）；
}
.前线{
利润上限：-284px；
背景：中心无重复url(http://www.broken-links.com/tests/images/faces.svg#devil-视图）；
背景大小：80%80%；
混合模式：差异化；
滤镜：灰度（100%）；
}

为什么不对子元素应用灰度，并混合图像元素的父元素呢？我相信我在codepen也尝试过。得到了同样的结果。无论如何，我建议你不要用这个来让图像看起来像底片。你到底需要这个做什么。你可以使用画布，也可以让服务器同时支持所有浏览器。我知道，但我希望它是动态的。如您所见，对象是可移动的。这会引起很多问题。有没有一种方法可以用canvas检测元素下面的像素？很抱歉回答得太晚，但我相信你可以使用SVG和sgv过滤器来代替。您可以更好地控制应用过滤器的顺序。为什么不将灰度应用于子元素并混合图像元素的父元素呢？我相信我在codepen也尝试过。得到了同样的结果。无论如何，我建议你不要用这个来让图像看起来像底片。你到底需要这个做什么。你可以使用画布，也可以让服务器同时支持所有浏览器。我知道，但我希望它是动态的。如您所见，对象是可移动的。这会引起很多问题。有没有一种方法可以用canvas检测元素下面的像素？很抱歉回答得太晚，但我相信你可以使用SVG和sgv过滤器来代替。您可以更好地控制应用过滤器的顺序。