CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 1258

Make white background of image transparent in css

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?

Upvotes: 45

Views: 163302

Answers (5)

Vitaliy Ulantikov
Vitaliy Ulantikov

Reputation: 10514

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`);
}

Upvotes: 7

Anthony M. Powers
Anthony M. Powers

Reputation: 1377

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

Upvotes: 2

dovidweisz
dovidweisz

Reputation: 1234

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.

Upvotes: 23

DrawdeX
DrawdeX

Reputation: 75

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

Upvotes: 1

user1822264
user1822264

Reputation: 2239

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

Upvotes: 215

Related Questions