如何跟踪和存储产品图像的许多排列？答案

【问题标题】：How to track and store many permutations of product images?如何跟踪和存储产品图像的许多排列？
【发布时间】：2012-03-07 12:16:15
【问题描述】：

我正在尝试找出一种很好的方法来存储产品图像的许多排列，这些排列代表了可用的不同选项。

例如，假设我们正在定制一辆汽车，我们有如下选项组：

每个都可以有许多可用的选择。

我想做的是能够在页面上显示代表用户选择的所有自定义选项的单个图像。例如，展示一辆带有镀铬轮辋、有色车窗、车身颜色装饰和轿跑车车身风格的红色汽车。

最棘手的部分是选项的数量不一致。继续以汽车为例，一些汽车可能比其他汽车有更多的选项组，并且根据车辆类型，一个组中可用的选项数量也可能不同。

一个特定的限制是它必须通过 Safari 在 iPad 上运行，因此基于 Flash 的解决方案不是一个选项。

有哪些策略可以管理所有可能的产品和选项排列？

【问题讨论】：

【解决方案1】：

我想到的一种可能性是我可以使用具有透明度的 PNG，然后在浏览器中将它们分层。每个图像将仅包含该特定选项所需的部分，其余部分将是透明的。就数据库而言，这将使跟踪单个选项图像变得非常容易。

这样做的一个缺点是图形团队需要大量工作才能生成所有这些图像。但是，如果这是最好的选择，那么它就必须是这样。

我的另一个担忧是，我需要非常精确地通过 CSS 覆盖这些图像，我认为这会产生一些跨浏览器的影响。我还必须知道将图像分层的顺序，以便它们都可见，但这不是问题。

【讨论】：

为什么要覆盖整个图像？把它切成几段。应该很容易做到。
如果图像被分割，那么定位变得异常困难。想象一下，在我的汽车示例中，如果你想改变门把手的颜色，就会有一个很小的图像被更大的图像包围。同样，如果我选择了窗口着色，我可能不会使用矩形。