如何生成产品的颜色变化 [英] How to generate color variations of the product

问题描述

我正在为iPad Safari的小型Web应用程序工作。我必须显示一个产品的图像和两个简单​​的颜色选择器。颜色选择器允许定制产品的颜色（图像上的两个独立区域）。每种颜色选择器都有30种颜色，因此有30x30种产品变化。这个问题最好的解决方案是什么？
我无法使用Flash。

我在想：

I am working on small web application for iPad Safari. I have to display image of one product and two simple color pickers. Color pickers allow to customize product's colors (two separate areas on the image). There are 30 colors in each color picker so there is 30x30 product variations. What would be the best solution for this problem. I can't use Flash.
I am thinking of:

1. 900个渲染的产品图像具有所有颜色变化
   
2. 我可以剪下每张图片的一部分并重叠它们。这将是60张图片。


3. SVG。我从来没有用过它。是否可以在白色产品图像上添加两个透明图层，用java脚本和色调图像更改其颜色。

推荐答案

你可以使用带有彩色部分的透明PNG图像（透明）它在一个包装器中并且改变它的 background-color 。这是使用一个图像：

You can use a transparent png image with the colored part cutout(transparent), put it inside a wrapper and change its background-color. This is using a single image:

http：// jsfiddle.net/vbU3v/1/

这篇关于如何生成产品的颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！