Как игнорировать прозрачные пиксели в режиме наложения фона

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?

Вот близко связанный пост stackru. Я не смог использовать это решение, потому что изображение, используемое в этом, было очень простым и имело только один цвет. -webkit-mask-box-image не работает для более сложных примеров.

РЕДАКТИРОВАТЬ: Вот изображение того, что я хочу, чтобы это выглядело: https://imgur.com/a/j3xt86B

Answer 1

Вы можете использовать CSS-свойство mask-image. Это экспериментально, но довольно хорошо поддерживается.

Здесь я использовал одно и то же изображение как маску и фон:

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