Opacitator

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

没有。还没......

尽管，但它已经非常接近了。看看这篇关于CSS过滤器的文章，这是一个经验丰富的css功能，它正在做一些客户端整洁的事情。

CSS Filters

Answer 3

Opacitator

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

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

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

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

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

Answer 4

您可以为图像制作容器。然后是容器的CSS：

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

希望它有所帮助。：）

Answer 5

由于没有可靠的方法可以使用 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 6

最好的方法是使用像Photoshop或Paint.Net这样的软件。

我推荐Paint.Net。您应该删除Paint.Net中的白色背景并将img保存为.png。

使图象白色背景透明在css

6 个答案:

Opacitator