37

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
  • You can make de background of the icon transparent with tools like Photoshop.
    – Kedume
    Sep 30, 2012 at 16:17
  • You can't do what you want with CSS, you have to use an image editing tool, as the previous commenter said. Sep 30, 2012 at 16:20

5 Answers 5

198

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

4
  • 1
    @SteffiKeranRaniJ Checkout my answer below. This technique is MAGIC and needs more visibility.
    – dovidweisz
    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.
    – Oliver
    Apr 24, 2019 at 11:58
  • 9
    It'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.
    – dkellner
    Jun 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
    – LTPCGO
    May 13, 2020 at 20:45
23

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.

4
  • 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?
    – dovidweisz
    Jun 21, 2020 at 13:07
  • 1
    Works like a charm. Even with github.com/scssphp/scssphp Apr 12, 2021 at 7:38
  • 1
    This is some beautiful code. Thanks for sharing it.
    – Danielle
    Mar 4 at 5:03
6

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`);
}
2
  • wow, nice, this is very impressive :D May 31, 2022 at 14:09
  • Best solution so far ! Oct 25, 2022 at 11:44
2

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
  • Thank you, this is the quickest trick. You saved me hours of work! Dec 10, 2019 at 13:14
2

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

2
  • CSS Filters are now On By Default in Firefox. Jan 14, 2015 at 14:24
  • 1
    How do I use it to do what is asked?
    – ADTC
    Aug 3, 2022 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.