不能将图像与前景和背景混合

Question

MWE这里：https://codepen.io/anon/pen/ZBVWBx

我想把一个标志和渐变混合起来，这样：

• 渐变只显示图像的字母
• 图像的背景(当前为白色)与页面的背景相匹配

这与这里的例子类似。

到目前为止，我已经得到了他们两个，但分开：

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

能办到吗？我尝试使用一个透明的图像作为标志，但这完全打破了background-blend-mode。

Answer 1

这可以通过一些有点棘手的布局来完成，使用反转：

​

.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.stack.imgur.com/C4CyU.jpg);
  mix-blend-mode: multiply;
}

.black {
  background-image: linear-gradient(cyan, yellow), url(https://i.stack.imgur.com/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>

​

我需要使用倒置来使用一个单一的文件为标志。如果你可以使用两个版本的标志，一个是相反的另一个，这将是不那么棘手。

还请注意，在此版本中，渐变的颜色需要设置为逆(因为上述技巧)。

​

​