How to ignore transparent pixels with background blend mode

Question

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

Notice how when you hover over the image, it is correctly applying the red tint to the goblin. However, I only want the red to apply to the goblin, not the transparent pixels around him. Is there a way to do this with CSS?

Here is a closely related stackoverflow post. I was not able to use this solution because the image used in this one was very basic and only had a single color. -webkit-mask-box-image does not work for more complex examples.

EDIT: Here is a pic of what I want it to look like: https://i.stack.imgur.com/WBHDF.jpg

Why not using a simple filter over an img element? Is there any reason so you have to stick with blend mode? — Frondor, Jun 01 '18 at 15:31
I'm really unclear on what it is you are trying to achieve here? Do you have an example of the *expected result*? — Paulie_D, Jun 01 '18 at 15:33
The expected result is exactly what is in the jsfiddle EXCEPT there should be no red background around the goblin. — satnam, Jun 01 '18 at 15:44
I updated the jsfiddle to hopefully make it a bit more clear what is going on — satnam, Jun 01 '18 at 15:45
@Frondor, which filter would make the goblin have a red tint? — satnam, Jun 01 '18 at 15:46

score 2 · Accepted Answer · answered Jun 01 '18 at 16:47

You could use the mask-image CSS property. Its experimental but fairly well supported.

Here I've used the same image as both the mask and the background:

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

Earlier today, I was playing with webkit mask image and couldn't get it to work. Your solution does exactly what I want, thanks! — satnam, Jun 01 '18 at 17:28
As of today, look like you should replace `-webkit-mask-image` by `-webkit-mask-box-image`, not sure about the `mask-image` property — Cédric Nirousset, Jul 07 '20 at 19:24

How to ignore transparent pixels with background blend mode

1 Answers1