产品图片的颜色选择器

听起来像个难题，不是吗？我们通常没有成千上万种颜色的产品照片，因此我们无法用 <img src="product-blue.jpg" alt="blue product"> 替换 <img src="product-red.jpg" alt="red product">。我们通常也没有以矢量格式提供的产品，因此无法对其应用 SVG fill 等操作。

但是，即使您的产品照片是位图图形文件（如 JPG 或 PNG），也有一种巧妙的方法可以做到这一点。 Kyle Wetton 演示了，它本质上是

1. 创建一个矢量路径，覆盖 JPG 上应更改颜色的区域（可能在 Photoshop 中使用钢笔工具并导出矢量）。
2. 将该实心矢量区域精确地放置在产品 JPG 的顶部。
3. mix-blend-mode: multiply; SVG。
4. 根据需要更改 SVG 的填充颜色。

我认为这是它最初的超酷演示

查看 Kyle Wetton 的 Pen
为这款沙发着色！– SVG + 混合模式技巧（@kylewetton)
在 CodePen 上。

以及文章中的演示

查看 Pen
动态颜色选择 – 第 3 部分
在 CodePen 上。