html - Make white background of image transparent in css

Question

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?

Answer 1

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;

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