为网络创建动态多层图像
我在 Photoshop 中有一个多层图像，我想在网络上使用它。目的是有许多按钮来显示/隐藏各个层。
我最初的想法是将每个图层导出为透明的 GIF PNG，使用 CSS 堆叠图像并使用 Javascript 切换每个图层的可见性。
有更好的方法来实现这一目标吗？我特别有兴趣听到任何软件或 JavaScript 库来简化这个过程。
非常感谢。
编辑：
澄清一下，所讨论的图像是一张具有各种轮廓和要叠加的阴影区域的地图，因此我只需要对图层不透明度进行基本控制。
I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我会将每一层堆叠成一个大图像。在前端代码中创建一个与图层大小相同的框架，并以堆叠图像作为背景。
创建按钮并使用 jquery 触发相对于按下的按钮的背景转换。看起来图像正在变化，但它只是改变了背景。这将节省连续图像加载的时间，使 UI 显得快速且无缝。
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
您可以尝试使用 ::before 和 ::after 以及 -webkit-mask-image 属性来帮助您创建多层图像。
或者只是将 png 与绝对位置堆叠在一起，顺便说一句，您的 png 需要采用 24 位 mod。
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.
您可以使用 P5.js 创建画布，然后简单地将每个图层加载到彼此之上。在p5.js中，您可以将每个图像分配给一个变量，使用draw()中的image()显示它，并使用条件逻辑在单击按钮时隐藏它，这非常简单。
这是一个展示如何显示图像的示例。
https://editor.p5js.org/ivymeadows/sketches/SyKvIlVA-
You can use P5.js to create a canvas and then simply load each layer on top of each other. In p5.js, you can assign each image to a variable, show it using image() inside draw() and use conditional logic to hide it when a button is clicked, its very simple.
Here is an example showing how to display images.
https://editor.p5js.org/ivymeadows/sketches/SyKvIlVA-