CODEWITHSUNDEEP
htmlcssimage
Darren Oakey
Darren Oakey

Reputation: 3604

css masking to remove a background color

have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)

I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -

html:

<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >

css:

img {
  mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);  
  mask-mode: luminance;  
}

that seemed to me that it should work - but it actually had no effect at all :(

Upvotes: 0

Views: 6202

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3913

mask-mode is not supported in 90% of the browsers, including webkit based.

Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.

If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..

or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.

But no way to apply the same image as a mask to get rid of the white

Upvotes: 1

Ajay Gupta
Ajay Gupta

Reputation: 2033

First of all you should know this: https://caniuse.com/#search=mask

And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/

As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**

Upvotes: 1

Related Questions