jQuery 您可以在网页上将图片叠加在一起吗？

Can you layer pictures on top of each other on a webpage?

提问by leora

I want to build a website that is a "dress up" game where you can click on different accessories and they will layer on top of each other.

我想建立一个网站，它是一个“装扮”游戏，您可以在其中单击不同的配件，它们将相互叠加。

Because it's a little difficult to describe, I found these examples which should hopefully highlight what I am trying to do:

因为它有点难以描述，我发现这些例子应该可以突出我正在尝试做的事情：

• This is the closest website that I have found, but I can't seem to find the code that is figuring out how the images should lay on top of each other.
• Similar to this iOS princess game

• 这是我找到的最近的网站，但我似乎无法找到确定图像应该如何相互重叠的代码。
• 类似于这个iOS公主游戏

I have hundreds of different accessories as images right now, and (similar to the game above) I need to support being able to choose more than one. So I need a solution that doesn't require me to pre-save an image of every permeation of accessory combinations on top of the princess (as that would be millions of predefined images).

我现在有数百种不同的配件作为图像，并且（类似于上面的游戏）我需要支持能够选择多个。所以我需要一个解决方案，它不需要我在公主的顶部预先保存每个配件组合渗透的图像（因为那将是数百万个预定义的图像）。

Ideally I would like a Javascript/jQuery or CSS solution but will take any suggestions that people have. Flash suggestions would be helpful as well.

理想情况下，我想要一个 Javascript/jQuery 或 CSS 解决方案，但会接受人们提出的任何建议。Flash 建议也会有所帮助。

So my questions are:

所以我的问题是：

• How is the example website above lining up all of the images on top of each other? I can't seem to find any CSS or Javascript code that is doing it?
• Are there any suggestions on how to build this type of website (links, tutorials or code examples would be great)?

• 上面的示例网站如何将所有图像排列在一起？我似乎找不到任何正在执行此操作的 CSS 或 Javascript 代码？
• 是否有关于如何构建此类网站的建议（链接、教程或代码示例会很棒）？

回答by Kevin Wang

The short answer is yes.

简短的回答是肯定的。

There are many ways of handling this. With HTML/CSS you can throw elements on top of each other easily.

有很多方法可以处理这个问题。使用 HTML/CSS，您可以轻松地将元素叠加在一起。

HTML:

HTML：

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

CSS:

CSS：

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

So let's take a look at what's important here. You have 3 images in your HTML document (imga, imgb, and imgc). In order to overlay these, you have to first set their positionto absoluteso that the images will ignore any default layout behaviors. Then, you can use the leftand topproperty to define the x,y coordinates of the img elements, respectively. In the example above, all of the elements are overlayed in the top-left corner of the page. In order control which image ends up on top, you can use the z-indexproperty like so:

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

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

This will make imgcappear in front, imgbappear behind imgc, and imgabehind everything else. The z-indexproperty assigns which element goes in front of another. The element with the greatest z-indexgoes on top, followed by the second greatest and so on.

这将使imgc出现在前面，imgb出现在imgc后面，而imga出现在其他所有内容之后。的z索引属性分配一个元件进去的另一前。z-index最大的元素排在最前面，然后是第二大的元素，依此类推。

For your project, we can slightly tweak the code above:

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

HTML

HTML

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

CSS

CSS

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

#layer3
{
z-index: 30;
}

Since you now understand what lies where, you know that layer3 is on top (accessories layer), layer2 is in the middle (your person). and layer1 is on the bottom (the background). Then you can create accessories like so:

既然你现在明白什么在哪儿了，你就知道 layer3 在上面（附件层），layer2 在中间（你的人）。layer1 在底部（背景）。然后你可以像这样创建配件：

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

And then using javascript, you can set the first layer's src equal to the clicked accessory's.

然后使用 javascript，您可以将第一层的 src 设置为与单击的附件的 src 相等。

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

You can create as many accessories as you want. Say you want to add more accessories on top of your person, then you can easily create more layers, assign their z-indexes (and even do this dynamically using javascript, how exciting!)

您可以根据需要创建任意数量的配件。假设你想在你的人身上添加更多的配件，那么你可以轻松地创建更多的层，分配他们的 z-index（甚至使用 javascript 动态地做到这一点，多么令人兴奋！）

In conclusion, I hope you found this little tutorial useful. For your purposes, I suggest taking a look at jQuery as well as the element. They will be fun to use and certainly help your application.

总之，我希望你发现这个小教程很有用。出于您的目的，我建议您查看 jQuery 以及元素。它们使用起来会很有趣，并且肯定会帮助您的应用程序。

Good Luck with your application.

祝你申请顺利。

回答by Jason Miesionczek

You will have to use a combination of position:absolute with top and left positions defined, as well as z-indexes to control which items appear on top.

您将必须使用定义了顶部和左侧位置的 position:absolute 的组合，以及 z-indexes 来控制哪些项目出现在顶部。

回答by bfavaretto

If you are looking for a solution that requires less code, try this:

如果您正在寻找需要更少代码的解决方案，请尝试以下操作：

1. Create your art in photoshop, with each accessory on a different layer
2. Save each layer as a separate image. Make sure to make all images the full canvas size, and use transparency. Save as PNG-24. This way, the position of each accessory will be "hardcoded" in the images, so you don't have to handle it in code.
3. Create a container <div>, and give it position: relative;.
4. Put all the images inside that <div>, as <img>tags, in the correct order (stack the layers, the background image being the first one)
5. Apply position: absolute;on every <img>.

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

This should get you started. Then use jQuery to toggle each image as the buttons representing them are clicked.

这应该让你开始。然后使用 jQuery 切换每个图像，因为单击代表它们的按钮。

回答by AlienWebguy

CSS3 supports multiple background layers

CSS3 支持多个背景层

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

回答by Joshua Welker

Using jQuery animations, you can create "draggable" images. Give your images an onmousedown event that starts a function that moves your image X horizontal and Y vertical pixels based on the current mouse location. Check out this link to look at how to find the mouse location with jQuery. http://docs.jquery.com/Tutorials:Mouse_Position

使用 jQuery 动画，您可以创建“可拖动”图像。为您的图像提供一个 onmousedown 事件，该事件启动一个函数，根据当前鼠标位置移动图像 X 水平像素和 Y 垂直像素。查看此链接以了解如何使用 jQuery 查找鼠标位置。http://docs.jquery.com/Tutorials:Mouse_Position

Or, even better, get the jQuery UI "droppable" plugin that makes it easy to give drag and drop functionality to any element. http://jqueryui.com/demos/droppable/

或者，更好的是，获得 jQuery UI“可放置”插件，它可以轻松地为任何元素提供拖放功能。http://jqueryui.com/demos/droppable/

回答by Alastair Pitts

I would look into using the <canvas>tag and API's.

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

It allows you to absolutely position items and images easily, also, if you are using a new browser, you will get the benefit of hardware acceleration, which will speed the whole thing up.

它允许您轻松地绝对定位项目和图像，此外，如果您使用的是新浏览器，您将获得硬件加速的好处，这将加快整个过程。

For backwards compatability in IE, you will need to use Google's Explorer Canvasjavascript plugin.

为了在 IE 中向后兼容，您需要使用 Google 的Explorer Canvasjavascript 插件。

回答by Michael Shimmins

Using a combination of css properties you can achieve what you're after.

使用 css 属性的组合，您可以实现您所追求的目标。

To position the accessories in the correct place you can set the position to absolute and use absolute co-ordinates to specify their position.

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

To set the order in which they display you can use the z-index property to "stack" them up.

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

Check out:

查看：

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

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

For some detailed info on it.

有关它的一些详细信息。