为什么我的产品照片在有色商店背景上出现了一个矩形？

先区分文件与容器

先确认有色区域究竟在哪里。JPEG不能保存透明像素，因此画布中的每一处都会带有已经渲染的颜色，即使它看起来与商店背景非常接近。PNG可以包含透明度，但也可能在产品周围保存了实色矩形，或保存了半透明的边缘。除此之外，主题还可能在图片元素外增加背景、内边距、边框或阴影。

两类问题的处理方式不同。文件问题会跟着素材出现在其他查看器中；容器问题通常只在店铺布局里出现，或者会随着卡片、画廊或主题颜色改变。颜色看起来相似，并不能证明它们在技术上完全相同。

1. 用能显示棋盘格透明背景的编辑器打开原始文件。确认文件格式、画布边缘，以及产品之外的区域是透明、不透明还是半透明。
2. 不要调整尺寸或重新着色，把同一文件分别放在白色和黑色背景上，再放到实际商店背景上。记录矩形是否跟着文件移动，还是始终属于页面容器。
3. 在商店工具允许检查的情况下，暂时关闭图片外层的主题背景、边框、阴影和内边距，然后与原布局比较。
4. 如果两个测试背景上都没有边界，只有放进商店后才出现，就停止修改图片，转而检查主题或组件。

检查底色与透明通道

颜色只差一点，也可能形成清楚的硬边。例如，一张粉色蜡烛的JPEG可能使用了略有不同的粉色，而产品卡片使用另一种粉色。差异在某个屏幕上很轻微，但靠近产品阴影时会明显起来。抠图时保存的底色也会造成同样结果：它可能适合一种背景，却在另一种背景上显出矩形。

半透明会带来另一种问题。边缘像素可能已经与原来的背景混合，而画布中央仍然是透明的。换成新的有色背景后，这些混合像素就可能显示成浅色或深色边缘。在同一边缘经过对比色测试前，不要直接把问题归因于主题颜色不匹配。

执行可控对比测试

对比时只使用一个未改变的文件，并固定显示尺寸。产品位置、裁切、缩放和周围间距也要保持不变。如果一次修改多个变量，新的裁切或CSS规则可能掩盖矩形的真正来源。

完整检查应同时覆盖图片和渲染后的页面。图片预览能说明交付了哪些像素或透明值；页面测试能说明主题在这些内容之外增加了什么。单独完成其中一项，都不能证明素材在所有设备或浏览器中的显示结果。

演练与停止条件

虚构练习：一个目录团队发现粉色蜡烛周围有矩形。在白色背景上几乎看不见，在黑色背景上明显呈粉色，在浅粉色商店卡片上仍然可见。团队检查JPEG后发现画布是不透明的粉色，于是导出真正带透明度的版本，再重复三种背景测试。产品边缘仍然存在，但矩形消失了。

通过条件是：在白色、黑色和实际商店底色上，画布边界都不应出现意外矩形，同时产品和有意保留的阴影仍然存在。一旦达到这个条件，就停止继续修改图片。如果素材测试通过、放进主题后又出现矩形，就停止修改素材，检查图片外层的背景、边框、内边距和阴影。

主题问题复核表