Cannot blend image with foreground and background

Question

MWE here: https://codepen.io/anon/pen/ZBVWBx

I would like to blend a logo with a gradient so that:

• the gradient colors the image's letters only
• the image's background (currently white) matches the page's background

This is similar to the example here.

So far I've got the two of them, but separatedly:

.amyspark-logo-1 { /* background */
  background: url('https://i.imgur.com/CZUynhW.png');
  background-size: 100%;
  height: 10rem;
  mix-blend-mode: overlay;
}

.amyspark-logo-2 { /* logo + gradient */
  background: url('https://i.imgur.com/CZUynhW.png'), linear-gradient(pink, red);
  background-size: 100%;
  height: 10rem;
  background-blend-mode: screen;
}

Can it be done? I tried using a transparent image for the logo, but that breaks background-blend-mode altogether.

Answer 1

This can be done with a little bit tricky layout, using invert:

.container {
  width: 600px;
  height: 400px;
  border: solid 1px red;
  position: relative;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
} 

.element {
  width: 100%;
  height: 100%;
  border: solid 1px green;
  position: absolute;
  top: 0px;
  background-size: cover;
}

.white {
  background-image: url(https://i.sstatic.net/C4CyU.jpg);
  mix-blend-mode: multiply;
}

.black {
  background-image: linear-gradient(cyan, yellow), url(https://i.sstatic.net/C4CyU.jpg);
  background-blend-mode: screen;
  filter: invert(1);
  mix-blend-mode: screen;
}

<div class="container">
<div class="element white"></div>
<div class="element black"></div>
</div>

I need to use invert to use a single file for the logo. If you can use 2 versions of the logo, one being the inverse of the other, it would be less tricky.

Note also that in this version, the colors of the gradient need to be set to the inverse (because the said trick)