您可以在网页上将图片叠加在一起吗? [英] 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 解决方案，但会接受人们提出的任何建议.Flash 建议也会有所帮助.

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).为了覆盖这些，您必须首先将它们的位置设置为绝对，以便图像将忽略任何默认布局行为.然后，您可以使用 left 和 top 属性分别定义 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 出现在前面，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 设置为与点击的附件的 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-index(甚至使用 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.

祝您申请顺利.

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