Make white background image transparent in css

Question

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

Answer 1

The best way is to use software such as Photoshop or Paint.Net.

I would recommend Paint.Net. You must remove the white background in Paint.Net and save the img as .png.

Answer 2

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

mix-blend-mode: multiply; 

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

Answer 3

Not. Not yet...

However, it is very close to opportunity. Check out this article about CSS Filters, an experimental css feature that does some client-side things that are neat.

CSS Filters

Answer 4

Opacitator

mix-blend-mode works for some browsers, but we found that it causes performance problems in Chrome, I have no idea why.

The designer from my team came up with this ingenious hack where you create a layer that is mostly transparent, but when it is superimposed on a white background, its color will match the color of the surrounding background.

The way this "magic" color is found; it is a calculation of how dark each color axis should be for the degree of opacity removal. The formula for this is 255 - ( 255 - x )/opacity . The problem is this: if the opacity is set too low, the formula gives you negative numbers (which cannot be used). If the opacity is too high, you will get some colors on non-white areas of your image.
Initially, we used a spreadsheet that would do the calculations, and by manual trial and error we found that the color is Goldilox.
As soon as we started using sass, I realized that this can be done using binary search. So I created a sass function that does all the work for us.

Check this out on sassmeister . Pass your background color to the opacitator function on line 56 of the sass code. and use the generated rgba color in the div (or pseudo-element) to overlay the image.

I also created a working example on codepen .

Answer 5

You can create a container for your image. Then for css container:

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

Hope this helps. :)

Answer 6

You can use this Photoshop action to remove the white background. I am also wondering if there is a solution to remove the white background of the image using CSS or HTML and make it transparent.