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?
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: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
-
1@SteffiKeranRaniJ Checkout my answer below. This technique is MAGIC and needs more visibility. Oct 23, 2018 at 15:56
-
When I tried this, in some cases the image's parent element also had to have a background colour explicitly set. E.g. if the body background is red, but the image is in a div, then that div also needed an explicit red background for the blend mode to work.– OliverApr 24, 2019 at 11:58
-
9It's not the effect you guys want to achieve, just very close to it. "Multiply" is a merge mode where pixel color values (of background and image layer) are inverse-multiplied; so that white * white = white, anyColor * white = anyColor, and anyColor * black = black. Therefore, if your icon has only black and white, this method will work (not with antialiased edges!), otherwise it will alter colors where both layers have something other than b/w. There's no such thing as "white-means-transparent" in commonly used merge modes.– dkellnerJun 3, 2019 at 12:29
-
@dkellner in principle given a translation is possible it should be possible to combine with other elements to focus just on the white colour– LTPCGOMay 13, 2020 at 20:45
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.
-
This still has the problem in that it recolors the image. Say you have an image with a white background and a container with a green background. You want the white in the image to be transparent, so it shows as green, and the rest of the image to be normal. Is that even possible here? Jun 20, 2020 at 4:39
-
@douglas-gaskell why don't you fork the codepen, and see for yourself? Jun 21, 2020 at 13:07
-
1
-
1
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`);
}
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. :)
-
Thank you, this is the quickest trick. You saved me hours of work! Dec 10, 2019 at 13:14
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.
-
-
1