jquery - 在 jquery、ajax 或纯 css 中重新着色图像

Question

我正在尝试构建一个向导，我是 ajax 和 jquery 的新手。我只是一个 html/css gal。我正在尝试这种方式，因为闪存无法在任何苹果设备上运行。反正我已经下载了http://techlaboratory.net/smartwizard并将以此为基础构建我的向导。

本质上，我正在构建的是一个向导，它会在每个步骤中帮助您构建汽车座椅。问题出现了，有多种类型的颜色可供选择，然后在其上插入多种颜色。例如，您可以选择黑色座椅，但如果您决定购买带衬垫的座椅，则可以选择黄色或蓝色等多种颜色。有太多的座位颜色 + 插入颜色我不想将那么多的图像选择加载到数据库中以从中提取。

我当时考虑做的是保存两个单独的 png 图像文件，一个用于座位，另一个用于插页。如果客户选择带有插入物的座位，他们每个人都有自己的 z-index，然后我使用 css 叠加层为每个 z-index 着色。问题是我可以只给图像本身上色，而不会将图像渗出到背景或索引较低的图像上吗？也许有人知道使用 ajax 有更好的方法来选择和更改每个元素的颜色？

Answer 1

您可以对反向透明的图像执行此操作。然后您可以为容器的背景添加颜色。

HTML

<div class="img-wrap">
    <img src="http://i41.tinypic.com/1112z3o.png" alt="" />
</div>

和CSS

.img-wrap { background-color: red; width: 153px; height: 78px; overflow: hidden;  }

这是一个jsfiddle

另一种方法是使用 HTML canvas(尽管这可能会影响性能)

在这里查看相关帖子:Html5 Canvas overlay