CSS背景-混合模式与不透明度相乘

Question

我正在将一个基于UI的游戏从Unity移植到Cordova。在Unity中，我使用各种颜色对以白色为主的图像进行着色，以重用资源。粗略的CSS等价物似乎使用了设置为multiply的主要标准background-blend-mode属性，并在背景中使用所需的色调颜色作为bg颜色。

.tinted {
  background-image: url('theimg.png');
  background-size: 100% 100%;
  background-color: #0f0;
  background-blend-mode: multiply;
}

问题是它不能保持图像的不透明度，也就是说透明部分变成了浅色。该规范说明了一些自上而下的混合，所以我认为它可能与bg颜色的混合有关，但如果我在图像顶部分层纯色(作为渐变)，它也不起作用。

.tinted2 {
  background-image: url('theimg.png'), linear-gradient(to bottom, #0f0, #0f0);
  background-size: 100% 100%;
  background-blend-mode: multiply;
}

颠倒背景图像的顺序或将混合模式更改为normal, multiply或multiply, normal也不起作用。对于如何正确使用CSS，有什么建议吗？

编辑:正如答案中提到的，alpha方面可以使用掩码属性来实现。我结合使用了这两种技术来获得我需要的东西：

.tintedMasked {
  background-image: url('theimg.png');
  background-size: 100% 100%;
  mask-image: url('theimg.png');
  mask-size: 100% 100%;
  background-color: #0f0;
  background-blend-mode: multiply;
}

Answer 1

如果我正确理解你想要做什么，那么背景混合不是方法，而是遮罩。

​

div {
    height: 200px;
    background-image:linear-gradient(SlateBlue, Tomato);
  -webkit-mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
  mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
}
}

<div></div>
<h1>No stairway??</h1>

​

这是假设你的蒙版图像是alpha透明的PNGs。您也可以通过设置mask-mode: luminance;来使用亮度蒙版