为商店制作自定义预览器

Question

我正试图找到一种模拟CSS中image-mask属性的方法;目前它在大多数浏览器中都不可用。是否有可以使用的JavaScript库？

我想出了如何通过创建带有带扣形状的透明空间的白色图像来设置带扣，然后设置背景颜色，因此背景颜色仅显示图像透明的位置。问题是，我不能为每个部分做到这一点，因为你不应该看到的白色边缘可以看到它背后部分的颜色（就像你有一个黑色方块，然后你使用要在它上面涂上一个红色圆圈的技术，你最终会在黑色方块的白色方块上出现一个红色圆圈。）

Answer 1

听起来你正在使用索引透明度 - 你需要使用带有8位alpha通道的PNG图像。然后有一个＆lt; img / \ 7gt;对于物品的每个“组件”（即一个用于皮带，一个用于带扣等），然后使用绝对定位将每个“直接”放在另一个的顶部。 8位透明度将确保它们看起来都正确。

<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>

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

另一种选择是让服务器端进程根据给定的参数动态生成图像，它会导致更简单的HTML，但对访问者来说会更慢 - 它可能会作为不支持脚本的客户端的后备工作。