使图象白色背景透明在css

Question

我有两个图像,其中一个是叠加在第一个图像上的小图标.我的图标具有白色背景,因此当图标放在另一个图像上时,我们会在图像上方出现白色方块时获得此效果.理想情况下,我不想在我的其他图像上显示此白色背景.是否有CSS属性可以应用于我的图标以使其白色背景透明？

Answer 1

实际上有一种方法虽然目前仅支持Chrome,Firefox和Safari.如果背景颜色为白色,则可以添加CSS属性:

mix-blend-mode: multiply;

你可以在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 2

遮光剂

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

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

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

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

我还在codepen 上创建了一个工作示例。

Answer 3

由于没有可靠的方法来使用 CSS 删除背景，因此分享我如何使用 JS 删除背景的代码片段：

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`);
}

Answer 4

还没有...

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

CSS 过滤器