无法将图像与前景和背景混合

Question

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

我想将徽标与渐变混合，以便：

• 渐变颜色仅为图像的字母
• 图像的背景（当前为白色）与页面的背景相匹配

这类似于the example here。

到目前为止，我已经得到了其中两个，但是分开了：

.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

这可以通过一些棘手的布局来完成，使用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.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>

我需要使用反转来使用单个文件作为徽标。如果你可以使用2个版本的徽标，其中一个版本与另一个版本相反，那就不那么棘手了。

另请注意，在此版本中，渐变的颜色需要设置为反向（因为上述技巧）