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, w

Answer 1

No. Not yet...

It is getting very close to possible, though. Check out this article about CSS Filters, an experiemental css feature, that is doing some things client-side that are neat.

CSS Filters

Answer 2

Opacitator

mix-blend-mode does work for some browsers, but we've found that it causes performance issues in chrome, I have no idea why.

A designer on my team came up with this genius hack, where you create a layer that is mostly transparent, but when it is laid over a white background, it's color will match the color of the surrounding background.

The way this "magical" color is found; is by calculating how much darker each color axis should be for the amount of opacity removed. The formula for this is 255 - ( 255 - x ) / opacity. The issue is: If the opacity is set too low the formula gives you negative numbers (which can't be used). If the opacity is too high, you'll get some coloring on the non-white portions of your image.
Initially we used a spreadsheet that would do the calculations and through manual trial and error we would find that Goldilox color.
Once we started using sass I realized that this can be accomplished with a binary search. So I created a sass function that does the work for us.

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

I also created a working example on codepen.

Answer 3

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

Answer 4

You can make a container for your image. Then for the css of the container:

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

Hope it helps. :)