【问题标题】：Make white background of image transparent in css在css中使图像的白色背景透明
【发布时间】：2012-09-21 16:21:19
【问题描述】：

我有两张图片，其中一张是叠加在第一张图片上的小图标。我的图标有一个白色背景，所以当图标放在另一个图像上时，我们会得到这样的效果，即在图像上出现一个白色方块。理想情况下，我不想在我的其他图像之上显示这个白色背景。是否有一个 CSS 属性可以应用于我的图标以使其白色背景透明？

【问题讨论】：

您可以使用 Photoshop 等工具将图标的背景设为透明。
CSS不能做你想做的事，你必须使用图像编辑工具，正如之前评论者所说。

标签： html css

【解决方案1】：

实际上有一种方法，虽然目前只在 Chrome、Firefox 和 Safari 上支持。如果背景颜色为白色，可以添加 CSS 属性：

mix-blend-mode: multiply;

您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

【讨论】：

@SteffiKeranRaniJ 在下面查看我的答案。这种技术很神奇，需要更多的可见性。
当我尝试这样做时，在某些情况下，图像的父元素还必须明确设置背景颜色。例如。如果主体背景为红色，但图像位于 div 中，则该 div 还需要明确的红色背景才能使混合模式正常工作。
这不是你们想要达到的效果，只是非常接近而已。 “乘”是一种合并模式，其中（背景和图像层的）像素颜色值是逆相乘的；这样白色 * 白色 = 白色，anyColor * 白色 = anyColor，并且 anyColor * 黑色 = 黑色。因此，如果您的图标只有黑色和白色，则此方法将起作用（不适用于抗锯齿边缘！），否则它将改变两个图层都具有黑白以外的颜色。在常用的合并模式中没有“白色意味着透明”之类的东西。
@dkellner 原则上考虑到翻译是可能的，它应该可以与其他元素结合起来，只关注白色

【解决方案2】：

遮光剂

mix-blend-mode 确实适用于某些浏览器，但我们发现它会导致 chrome 出现性能问题，我不知道为什么。

我团队中的一位设计师想出了这个天才技巧，您可以在其中创建一个大部分透明的图层，但是当它放在白色背景上时，它的颜色将与周围背景的颜色相匹配。

找到这种“神奇”颜色的方式；是通过计算每个颜色轴应该为去除的不透明度量而变暗多少。这个公式是255 - ( 255 - x ) / opacity。问题是：如果不透明度设置得太低，公式会给你负数（不能使用）。如果不透明度太高，图像的非白色部分会出现一些着色。
最初，我们使用电子表格进行计算，通过手动试验和错误，我们会发现 Goldilox 颜色。
一旦我们开始使用 sass，我意识到这可以通过二分搜索来完成。所以我创建了一个为我们工作的 sass 函数。

在sassmeister 上查看this gist。将您的背景颜色传递给 sass 代码第 56 行的 opacitator 函数。并在 div（或伪元素）中使用生成的 rgba 颜色来覆盖图像。

我还创建了一个working example on codepen。

【讨论】：

这仍然存在重新着色图像的问题。假设您有一个白色背景的图像和一个绿色背景的容器。您希望图像中的白色是透明的，因此它显示为绿色，而图像的其余部分是正常的。这里甚至可能吗？
@douglas-gaskell 为什么不分叉代码笔，自己看看？
像魅力一样工作。即使github.com/scssphp/scssphp

【解决方案3】：

没有。还没有……

不过，这已经非常接近了。查看这篇关于 CSS 过滤器的文章，这是一个实验性的 css 功能，它可以在客户端做一些简洁的事情。

CSS Filters

【讨论】：

CSS 过滤器现在在 Firefox 中默认开启。

【解决方案4】：

您可以为您的图片制作一个容器。那么对于容器的css：

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;

希望对您有所帮助。 :)

【讨论】：

谢谢，这是最快的技巧。你为我节省了几个小时的工作时间！

【解决方案5】：

由于没有可靠的方法来使用 CSS 去除背景，所以分享一个我是如何使用 JS 做到的代码 sn-p：

public async removeImageBackground(image) {
  const backgroundColor = { red: 255, green: 255, blue: 255 };
  const threshold = 10;

  const imageElement = new Image();
  imageElement.src = image;
  await new Promise(function(resolve) { imageElement.addEventListener('load', resolve); });

  var canvas = document.createElement('canvas');
  canvas.width = imageElement.naturalWidth;
  canvas.height = imageElement.naturalHeight;

  var ctx = canvas.getContext('2d');
  ctx.drawImage(imageElement, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < imageData.data.length; i += 4) {
    const red = imageData.data[i];
    const green = imageData.data[i + 1];
    const blue = imageData.data[i + 2];
    if (Math.abs(red - backgroundColor.red) < threshold &&
      Math.abs(green - backgroundColor.green) < threshold &&
      Math.abs(blue - backgroundColor.blue) < threshold) {
      imageData.data[i + 3] = 0;
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL(`image/png`);
}

【讨论】：