为 Web 创建动态多层图像

Creating a dynamic multi-layered image for the web

本文关键字：图像动态 Web 创建更新时间：2023-09-26

我在Photoshop中有一个多层图像，我想在网络上使用。目的是有许多按钮来显示/隐藏各个图层。

我最初的想法是将每个图层导出为透明的~~GIF~~ PNG，使用CSS堆叠图像并使用Javascript切换每个图层的可见性。

有没有更好的方法来实现这一目标？我特别有兴趣听到任何软件或Javascript库来简化这个过程。

非常感谢。

编辑：
澄清一下，有问题的图像是一张地图，具有要叠加的各种轮廓和阴影区域，因此我只需要对图层不透明度进行基本控制。

我会将每一层堆叠成一个大图像。在前端代码中，创建一个与层大小相同的帧，并将堆叠的图像作为背景。

创建按钮并使用 jquery 触发相对于按下的按钮的背景偏移。看起来图像正在改变，但它只是在移动背景。这将节省连续的图像加载，使 UI 看起来快速无缝。

您可以尝试使用：：before 和：：after 以及 -webkit-mask-image 属性来帮助您创建多层图像。

或者只是将 png 与绝对位置堆叠在一起，顺便说一下，您的 png 需要处于 24 位 mod。

您可以使用 P5.js 创建画布，然后简单地将每个图层加载到彼此之上。在 p5.js 中，您可以将每个图像分配给一个变量，在 draw（）中使用 image（）显示它，并在单击按钮时使用条件逻辑将其隐藏，这非常简单。

下面是一个显示如何显示图像的示例。https://editor.p5js.org/ivymeadows/sketches/SyKvIlVA-