So I've been making a site for TheOdinProject using the fake store API and the images the API provides have a white background which is obvious if changing the background colour of it's container. I had a look around and found mix-blend-mode: multiply; which worked but also ended up having some weird problems. I decided to look at the Amazon website to see how they do it and found that all the images worked fine for them without any obvious background. Going through the Firefox inspector I couldn't find anywhere that made it obvious how they managed to blend the image background (Which is definitely white) into the grey colour they place it on top of. For that matter, I couldn't even figure out how they managed to get the grey colour (Image provided) at all despite following the nodes all the way from the image to the root which has a solid white background.
Can anyone give me any insight into 1) how they managed to get the grey colour displaying without it showing up in the inspector and 2) how they managed to blend the background colour of the image without mix-blend-mode: multiply;?
Thank you.
Grey background shown on left side of cards
It is actually a very dirty hack 😄.
If you inspect the products page, you'll see that they've added an ::after (sudo) element with the following CSS:
{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.03;
pointer-events: none;
}
So as you can see they are adding a very very transparent gray filter to everything! so if you have a good eye (and monitor) you can see that white products turn gray a little.