Fatal编程技术网
  • css/
  • 删除CSS中PNG文件的背景色

删除CSS中PNG文件的背景色

css

删除CSS中PNG文件的背景色,css,Css,如何使用CSS删除png的背景色 我在一个网站上工作，我需要在背景图像上叠加一个png图标。由于图像来自外部API，因此我无法事先对其进行编辑 选项1：纯CSS[有限支持] 唯一的方法是使用混合混合模式或背景混合模式，但不幸的是IE和Edge不支持它（检查支持级别），如果您需要IE支持，请参见选项2 您可以阅读有关此CSS属性的更多信息。通过将混合模式置于屏幕，您可以删除png图像的白色背景 background-image: url(face.jpg); background-colo

如何使用CSS删除png的背景色

我在一个网站上工作，我需要在背景图像上叠加一个png图标。由于图像来自外部API，因此我无法事先对其进行编辑

选项1：纯CSS[有限支持] 唯一的方法是使用
混合混合模式
或
背景混合模式
，但不幸的是IE和Edge不支持它（检查支持级别），如果您需要IE支持，请参见选项2

您可以阅读有关此CSS属性的更多信息。通过将混合模式置于
屏幕
，您可以删除png图像的白色背景

  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
选项2:ImageMagick[需要后端]
您可以创建自己的后端端点，从API获取图像，使用ImageMagick删除背景并返回新的透明图像。如果图标很小，您甚至可以将图像作为encodebase64嵌入API。Base65编码和解码支持浏览器

混合模式

因此，虽然浏览器对这些浏览器的支持非常低，但如果您不需要担心IE/Edge/Mobile浏览器，那么这应该很好

使用起来非常简单，您要做的是应用背景图像和背景颜色，然后是指定的背景混合模式

虽然没有一款能像图像编辑软件中那样给你带来完美的背景变化，但你将非常接近于倍增

例如：

你试过什么吗？ 
background-image: url('yourimage.png');
background-color: blue;
background-blend-mode: multiply;