时间戳

首页 > 解决方案 > 亚马逊如何混合其图像的白色背景？

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

问题描述

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

谁能给我任何见解：1）他们如何设法在不显示在检查器中的情况下显示灰色，以及 2）他们如何设法混合图像的背景颜色而不显示mix-blend-mode: multiply;？

谢谢你。

卡片左侧显示灰色背景

亚马逊网站上图片的背景颜色

直接来自源的图像的背景颜色

标签： htmlcssimagebackground-colorweb-inspector

解决方案

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

如果您检查产品页面，您会看到他们添加了一个::after(sudo) 元素，其中包含以下 CSS：

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

所以你可以看到他们为所有东西添加了一个非常透明的灰色滤镜！因此，如果您的眼睛（和显示器）良好，您可以看到白色产品会稍微变灰。

推荐阅读