如何忽略背景混合模式下的透明像素

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做这件事吗？

下面是一个密切相关的堆叠溢流柱。我无法使用这个解决方案，因为在这一个中使用的图像是非常基本的，只有一个颜色。-webkit-掩膜-框-图像不适用于更复杂的例子。

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

Answer 1

你可以用掩码-图像CSS属性。它是实验性的，但得到了很好的支持。

在这里，我使用了与掩码和背景相同的图像：

​

.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>

​