32

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

4

5 回答 5

162

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

mix-blend-mode: multiply;

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

于 2015-12-15T19:41:28.303 回答
19

遮光剂

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

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

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

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

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

于 2016-09-08T16:38:17.290 回答
2

还没有...

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

CSS 过滤器

于 2014-11-14T16:23:53.130 回答
1

由于没有可靠的方法来使用 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`);
}
于 2021-05-10T19:06:27.387 回答
1

您可以为您的图像制作一个容器。然后对于容器的css：

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

希望能帮助到你。:)

于 2017-06-15T02:43:44.570 回答