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

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

0 голосов
/ 01 июня 2018

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

1 Ответ

0 голосов
/ 01 июня 2018

Вы можете использовать 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>
...