html - 亚马逊如何混合其图像的白色背景？

Question

所以我一直在使用假商店 API 为 TheOdinProject 创建一个站点，并且 API 提供的图像具有白色背景，如果更改其容器的背景颜色，这一点很明显。我环顾四周，发现 mix-blend-mode: multiply; 可以工作，但最终也遇到了一些奇怪的问题。我决定查看亚马逊网站，看看他们是如何做到的，发现所有图像都可以正常工作，没有任何明显的背景。通过 Firefox 检查器，我找不到任何地方可以清楚地说明他们是如何设法将图像背景(绝对是白色的)混合到他们将其放置在其上的灰色中。就此而言，我什至无法弄清楚他们是如何设法获得灰色(提供的图像)的，尽管从图像一直跟踪节点到具有纯白色背景的根。

任何人都可以告诉我 1) 他们如何设法在不在检查器中显示灰色的情况下显示灰色，以及 2) 他们如何在没有 mix-blend 的情况下混合图像的背景色-模式:乘法；?

谢谢。

Grey background shown on left side of cards

Background colour of image on Amazon's site

Background colour of image directly from source

Answer 1

这实际上是一个非常肮脏的 hack 😄。

如果您检查产品页面，您会看到他们添加了一个带有以下 CSS 的 ::after (sudo) 元素:

{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.03;
  pointer-events: none;
}

如您所见，他们正在为所有内容添加非常非常透明的灰色滤镜!因此，如果您的眼睛(和显示器)很好，您会发现白色产品稍微变灰了。