css - 使用 Jpeg 用纯 CSS 遮罩另一个图像？

Question

我需要使用 Jpeg 图像的黑色像素作为“透明层”来掩盖另一个图像。

当我将此PNG图像用作蒙版时，它可以正常工作：

（这是一个阿尔法背景中的白色方块）

但是我需要对 Jpeg 图像做同样的事情，用黑色替换 alphachannel ！（所以没有阿尔法通道）。

这是我的CSS：

#selection-image {
  width: 1000px;
  height: 800px;
  position: absolute;
  -webkit-mask-image: urlhttps://image.noelshack.com/fichiers/2019/14/4/1554391365-output-onlinepngtools-2.png);
  -webkit-mask-size: 1000px 800px;
  mask-image: url(https://image.noelshack.com/fichiers/2019/14/4/1554391365-output-onlinepngtools-2.png);
  mask-size: 1000px 800px;
  mask-type: alpha;
  background: red;
}

我不能使用画布删除黑色像素，因为它需要太多时间。我以为我可以使用属性掩码类型：亮度，但它似乎也只适用于 alpha 通道..

标签： cssjpegmask