在网页上，你能把多张图片叠放在一起吗？

Question

我想构建一个“试衣间”游戏网站，用户可以点击不同的配件，它们会叠加在一起。

因为有点难描述，我找到了以下示例，希望能够凸显我的目标：

• 这是我找到的最接近的网站，但我似乎找不到代码来确定图像应该如何叠放在一起。
• 类似于此iOS公主游戏

我现在有数百种不同的配件图片，并且（与上面的游戏类似）需要支持选择多个配件。因此，我需要的解决方案不需要我预先保存每个公主上配件组合的图像（因为那将是数百万个预定义图像）。

理想情况下，我希望使用JavaScript / jQuery或CSS解决方案，但我将接受任何人的建议。Flash的建议也很有帮助。

所以我的问题是：

• 上述示例网站如何排列所有图像？我似乎找不到任何CSS或JavaScript代码？
• 有关如何构建此类型的网站的任何建议（链接，教程或代码示例都可以）？

- leora

---

使用HTML和CSS可以实现图像分层。您甚至可以使用jQuery插件通过鼠标拖动图像。 - Sparky

我认为这与Javascript关系不大。这似乎是一个HTML和CSS的问题。一旦图像放置、z-index和透明度或不透明度的策略被定义，脚本可能有用于动态更改它。 - RobG

不算是一个答案：但这难道不很神奇吗：http://bloom.io/ （他们通过将图像叠加在一起来实现所有功能） - Kai Huppmann

Answer 1

短答案是肯定的。

有很多处理方法。使用HTML/CSS，您可以轻松地将元素放置在彼此上方。

HTML:

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS:

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

让我们来看看这里的重点。您在HTML文档中有3个图像（imga、imgb和imgc）。为了叠加这些图像，您必须首先将它们的position设置为absolute，以便图像忽略任何默认的布局行为。然后，您可以使用left和top属性分别定义img元素的x、y坐标。在上面的示例中，所有元素都叠放在页面的左上角。为了控制哪个图像最终位于顶部，您可以使用z-index属性，如下所示：

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

这将使imgc显示在最前面，imgb显示在imgc后面，imga显示在其他所有元素的后面。 z-index属性指定哪个元素位于另一个元素的前面。具有最大z-index的元素置于顶部，其次是第二大的元素，依此类推。

对于您的项目，我们可以稍微调整上面的代码： HTML

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

CSS

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

现在你已经了解每个图层的位置，你知道layer3在最上面（附件层），layer2在中间（你的人物），layer1在底部（背景）。然后你可以这样创建附件：

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

然后使用JavaScript，您可以将第一层的src设置为所点击配件的src。

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

你可以创建任意数量的配件。比如你想在人物上添加更多配件，那么你可以轻松地创建更多图层，分配它们的z-index（甚至可以使用JavaScript动态地做到这一点，多么令人兴奋！）

总之，我希望你觉得这个小教程有用。对于你的目的，我建议你看看jQuery和元素。它们会很有趣，肯定有助于你的应用程序。

祝你的应用程序好运。

- Kevin Wang

---

+1，非常详尽的回答。不过我认为你把z-index搞反了：z-index越高，它就越靠近堆栈顶部（在z轴上）。请参见这里。 - Thomas Shields

在这种情况下，常识仍然没有被勾选为答案。所以+1 :)。 - Caimen

Answer 2

您需要使用position:absolute与top和left位置定义的组合，以及z-index来控制哪些项目显示在顶部。

- Jason Miesionczek

---

你可能想要开始查看jQuery UI的可拖动和可放置功能。这些功能使得移动元素并将它们捕捉到特定位置变得更加容易。对于z-index，对于一个简单的解决方案，只需确保衣服/配件的z-index值高于基础“连衣裙”即可。 - Jason Miesionczek

Answer 3

如果你想要一个需要更少代码的解决方案，请尝试以下方法：

1. 在Photoshop中制作艺术品，每个配件放在不同的图层上。
2. 将每个图层另存为单独的图像。确保所有图像都是完整画布大小，并使用透明度。保存为PNG-24格式。这样，每个配件的位置将在图像中“硬编码”，因此你无需在代码中处理。
3. 创建一个容器<div>，并给它position: relative;。
4. 将所有图像放在该<div>中，以<img>标签的形式按正确顺序排列（堆叠图层，背景图像为第一个）
5. 在每个<img>上应用position: absolute;。

这样你就可以开始了。然后使用jQuery来切换每个图像，如代表它们的按钮被点击时所示。

- bfavaretto

Answer 4

CSS3支持多重背景层（multiple background layers）

。

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

- AlienWebguy

Answer 5

我会考虑使用<canvas>标签和API。

它可以轻松地绝对定位项目和图像，而且如果你正在使用新的浏览器，你将获得硬件加速的好处，这将加速整个过程。

为了向后兼容IE，您需要使用Google的Explorer Canvas JavaScript插件。

- Alastair Pitts

Answer 6

使用jQuery动画，您可以创建“可拖动”图像。给您的图像一个onmousedown事件，该事件启动一个函数，根据当前鼠标位置移动您的图像X水平和Y垂直像素。查看此链接以了解如何使用jQuery查找鼠标位置：http://docs.jquery.com/Tutorials:Mouse_Position 或者，更好的方法是获取jQuery UI“droppable”插件，该插件使得将拖放功能添加到任何元素变得容易。 http://jqueryui.com/demos/droppable/

- Joshua Welker

Answer 7

通过组合CSS属性，您可以实现您想要的效果。

为了将配件放置在正确的位置，您可以将位置设置为绝对，并使用绝对坐标来指定它们的位置。

要设置它们显示的顺序，您可以使用z-index属性来“堆叠”它们。

请查看：

http://www.html.net/tutorials/css/lesson15.php

有关此的详细信息。

- Michael Shimmins