你可以在一个网页上相互叠加图片吗？ [英] Can you layer pictures on top of each other on a webpage?

问题描述

我想建立一个网站，这是一个装扮游戏，你可以点击不同的配件，他们将层叠在彼此。

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:

• 这是我找到的最接近的网站，但我似乎找不到的代码，正在弄清楚如何图像应该


• 与这个iOS公主游戏类似

• 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

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

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).

理想情况下，我想要一个Javascript / jQuery或CSS解决方案，但会采取任何建议，人们有。

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.

所以我的问题是：

• 上面的示例网站如何排列所有的图像在彼此的顶部？我似乎找不到任何CSS或Javascript代码，这是做它吗？


• 有任何建议如何构建这种类型的网站（链接，教程或代码示例将是伟大的）？

推荐答案

简短的答案是肯定的。

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

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

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）。为了覆盖这些，您必须先将位置设置为绝对，以使图片忽略任何默认布局行为。然后，您可以使用左和顶部属性分别定义img元素的x，y坐标。在上面的示例中，所有元素都覆盖在页面的左上角。为了控制哪个图片位于顶部，您可以使用 z-index 属性：

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 position to absolute so that the images will ignore any default layout behaviors. Then, you can use the left and top property 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-index property like so:

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

这会使 imgc strong> imgb 在 imgc 后面， imga 在后面。 z-index 属性分配哪个元素在另一个元素前面。 z-index 的元素位于顶部，其次是最大的元素，依此类推。

This will make imgc appear in front, imgb appear behind imgc, and imga behind everything else. The z-index property assigns which element goes in front of another. The element with the greatest z-index goes on top, followed by the second greatest and so on.

对于您的项目，调整上述代码：

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

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在底部（背景）。然后您可以创建如下的附件：

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:

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

然后使用javascript，你可以设置第一层的src等于点击的附件。 >

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

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

您可以创建任意数量的配件。假设你想在你的人物上添加更多的配件，你可以很容易地创建更多的图层，分配他们的z-索引（甚至使用javascript动态使用，这令人兴奋！）

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!)

总之，我希望你发现这个小教程有用。为了您的目的，我建议看看jQuery以及元素。

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.

您的申请表示祝您好运。

Good Luck with your application.

这篇关于你可以在一个网页上相互叠加图片吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！