是否可以使用CSS使图像中的白色像素透明或靠近它？

Question

按照指南such as this，我已成功使用全彩色JPG创建单调图像。

这是我目前用于将图像转换为蓝色单调的CSS代码：

filter: grayscale(100%) brightness(200%) sepia(100%) hue-rotate(-180deg) saturate(200%) contrast(1);

我想从这里做的是将图像放在另一个图像上，这样图像是白色的，它是透明的。或者至少，足够接近。

我尝试使用mix-blend-mode，darken参数似乎与我所追求的最接近。但是，mix-blend-mode的问题在于它不仅仅对一个图像起作用。它从顶部和底部图像中获取值，并且两者之间的关系是否可见。当尝试创建一个顶部和底部图像可能是明暗组合的一般系统时，这会产生不可预测的结果。

另外，我有点担心浏览器对mix-blend-mode的支持。

I have created a fiddle here that shows the stage I'm at now.

这可能最终是不可能的，但是，是否有任何方法可以使图像透明，具体取决于像素的白色程度，而不管下面图像的内容是什么？是否有我能接近这种效果吗？

Answer 1

将该评论移植到答案中，因为该建议有效：您应该使用mix-blend-mode: multiply。这种混合模式实际上会使白色像素完全透明，因为它的工作原理 - 它将当前图层像素（例如你的hello kitty叠加层）的亮度级别与下面图层中的像素（例如背景图像）相乘。

  

乘法混合模式将顶层的每个像素的数字与底层的相应像素相乘。结果是一张更黑的画面。

     

Source: Wikipedia

由于白色与任何东西相乘会产生白色（沿着与任意数字相乘的0行），保证100％透明度，并且在重叠像素为白色的情况下不会有颜色变化。

接下来的问题是如何增加图像的对比度，以便即使图中的彩色部分也会变白。这就像将亮度提升到足够高的水平一样简单（我使用500%，任意确定），它似乎有效：

请参阅下面的概念证明小提琴：

img {
  position: absolute;
  top: 0;
  left: 0;
}

.blue {
  filter: grayscale(100%) brightness(600%);
  mix-blend-mode: multiply;
}

<img src="http://i.dailymail.co.uk/i/pix/2017/10/14/12/4551406D00000578-4979962-image-a-1_1507978862213.jpg">
<img class="blue" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="300px" />