CSS background-blend-mode乘以不透明度

Question

我正在將基於UI的游戲從Unity移植到Cordova。 在Unity中，我主要將白色圖像着色為各種顏色以重用資產。 粗略的CSS等效項似乎是使用[大多是標准的] background-blend-mode屬性集來進行multiply ，並將背景中的圖像具有所需的色調顏色作為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正確執行此操作的任何建議？

編輯：正如答案所述，可以使用mask屬性實現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透明PNG。 您還可以通過設置mask-mode: luminance;使用亮度遮罩mask-mode: luminance;