为网络创建动态多层图像答案

【问题标题】：Creating a dynamic multi-layered image for the web为网络创建动态多层图像
【发布时间】：2011-05-20 15:10:14
【问题描述】：

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

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

有没有更好的方法来实现这一点？我特别想知道有什么软件或 Javascript 库可以简化这个过程。

非常感谢。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

问题是，任意层的任意组合都需要在任意时刻显示。抱歉，我刚刚编辑了我的问题以澄清这一点。
创建触发不同 div 的按钮，这些 div 可以显示或隐藏它们的对应项。创建一个相对定位的容器框架 div。在此将您的图像放在容器内的绝对 div 中，按照您希望图层的顺序对它们进行 z-index。

【解决方案2】：

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

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

【讨论】：

谢谢。 -webkit-mask-image 是特定于浏览器的吗？我需要保持与所有主流浏览器的兼容性。
是的，dash 供应商附带的所有东西都特定于供应商。但是 ::before 和 ::after 是来自 CSS3 的伪元素，而 :before 和 :after 是 CSS 2.1 的一部分。如果您对浏览器支持有疑问，可以使用这个很棒的资源：@987654321@