如何使用背景混合模式忽略透明像素

Question

看到这个JSFiddle

.goblin {
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  width: 600px;
  height: 500px;
  background-color: red;
  background-blend-mode: normal;
}

.goblin:hover {
  background-blend-mode: multiply;
}

请注意，当您将鼠标悬停在图像上时，它会正确地将红色调应用到地精。但是，我只希望红色应用于地精，而不是他周围的透明像素。有没有办法用 CSS 做到这一点？

这是一个密切相关的stackoverflow post。我无法使用此解决方案，因为此解决方案中使用的图像非常基本，并且只有一种颜色。 -webkit-mask-box-image 不适用于更复杂的示例。

编辑：这是我想要的图片：https://imgur.com/a/j3xt86B

Answer 1

您可以使用mask-image CSS property。它是实验性的，但得到了很好的支持。

这里我使用了相同的图像作为蒙版和背景：

.goblin {
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  width: 600px;
  height: 500px;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
}

.goblin:hover {
  background-blend-mode: multiply;
  background-color: red;
}

<div class="goblin"></div>