Question

我正在使用混合混合模式根据背景翻转图像的颜色。到目前为止一切都那么好，但如果背景有颜色而不是灰色或黑/白。结果变得丰富多彩。我知道这就是mix-blend-mode：差异的方式。

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

预期结果是牙齿没有着色但亮度反转。

我创建了另一支笔： http://codepen.io/Type-Style/pen/bVMZZL 你可以在这里拖动魔鬼。它在黑白上工作正常

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

.bg, .front {
  margin: 0 auto;
  width: 300px; height: 300px;
  background: linear-gradient(to bottom, #9f9 50%, #090 50%);
}
.front {
   margin-top: -284px;
  background: center no-repeat  url(http://www.broken-links.com/tests/images/faces.svg#devil-view); 
  background-size: 80% 80%;
  mix-blend-mode: difference;
  filter: grayscale(100%);
  
}

<div class="bg"></div>
<div class="front"></div>

操纵css mix-blend-mode

0 个答案: