使图像的白色背景在CSS中透明 [英] Make white background of image transparent in css

问题描述

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

I have two images, one of which is a small icon that is superimposed over the first image. My icon has a white background, so when the icon is placed over the other image, we get this effect where a white square appears over the image. Ideally, I do not want to display this white background on top of my other image. Is there is a CSS property I can apply to my icon to make its white background transparent?

推荐答案

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

Actually there is a way although only currently supported on Chrome, Firefox, and Safari. If the background color is white, you can add the CSS property:

mix-blend-mode: multiply;

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

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

这篇关于使图像的白色背景在CSS中透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！