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

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

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

How to ignore transparent pixels with background blend mode

css

css-filters

background-blend-mode