Css 为商店制作自定义预览器

我试图找到一种方法来模拟CSS中的

图像掩码
属性；目前它在大多数浏览器中都不可用。有一个JavaScript库可以工作吗

我通过创建一个白色图像并在其形状中留出一个透明的空间，然后设置一个背景色，这样背景色只显示图像透明的地方，从而了解了如何制作扣子。问题是，我不能对每个零件都这样做，因为你不应该看到的白色边缘在它后面零件的颜色下是可见的（比如如果你有一个黑色的正方形，然后你用这种技术在上面画一个红色的圆圈，你会在一个黑色的正方形上画一个红色的圆圈。）
听起来您使用的是索引透明度-您将希望使用带有8位alpha通道的PNG图像。那就吃一顿饭吧

当然，您需要一些客户端脚本来为选定的颜色/设计交换每个图像

另一种选择是让服务器端进程根据给定的参数动态生成图像，这会生成更简单的HTML，但对访问者来说会更慢-它可能会作为不支持脚本的客户端的后备方案。
这里是一个演示：注意红色之间的空白。我怀疑这会解决它。我需要能够改变与css的部分颜色。（最后不会是内联的）此外，它将有更多的层在这些层的顶部，将部分覆盖红色。（我想卖定制手镯。）谢谢你，IanEdit：让我换个说法；我需要一种方法来包含背景色，同时使当前的白色区域透明。我想这能更好地解释这一点。
<div id="previewArea">
    <img class="layer2" src="buckle{color}.png" />
    <img class="layer1" src="belt{color}.png" />
    <img class="layer0" src="pants{color}.png" />
</div>