How to generate color variations of the product [c

问题:

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

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 rendered product images with all color variations
2. I could cut part of each image and overlap them. It would be 60 images.
3. SVG. I have never used it. Is it possible to add two transparent layers over white product image, change its colors with java script and tint image that way.

回答1:

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/