2

看到这个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 帖子。我无法使用此解决方案，因为此解决方案中使用的图像非常基本，并且只有一种颜色。-webkit-mask-box-image 不适用于更复杂的示例。

编辑：这是我希望它看起来像的图片： https ://imgur.com/a/j3xt86B

4

1 回答 1

1

您可以使用mask-image 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>

于 2018-06-01T16:47:15.950 回答