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?

2

5 Answers

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:

4

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.

3

As there is no reliable way to remove background with CSS, sharing a code snippet of how I did it with JS:

public async removeImageBackground(image) { const backgroundColor = { red: 255, green: 255, blue: 255 }; const threshold = 10; const imageElement = new Image(); imageElement.src = image; await new Promise(function(resolve) { imageElement.addEventListener('load', resolve); }); var canvas = document.createElement('canvas'); canvas.width = imageElement.naturalWidth; canvas.height = imageElement.naturalHeight; var ctx = canvas.getContext('2d'); ctx.drawImage(imageElement, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imageData.data.length; i += 4) { const red = imageData.data[i]; const green = imageData.data[i + 1]; const blue = imageData.data[i + 2]; if (Math.abs(red - backgroundColor.red) < threshold && Math.abs(green - backgroundColor.green) < threshold && Math.abs(blue - backgroundColor.blue) < threshold) { imageData.data[i + 3] = 0; } } ctx.putImageData(imageData, 0, 0); return canvas.toDataURL(`image/png`);
}

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

1

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. :)

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy