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。它的实验但得到了很好的支持。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: