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

Question

我想建立一个"装扮"游戏的网站,你可以点击不同的配件,它们将叠加在一起.

因为它有点难以描述,我发现这些例子应该有希望突出我想要做的事情:

• 这是我找到的最接近的网站,但我似乎无法找到解决图像如何相互叠加的代码.
• 类似于这款iOS公主游戏

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

理想情况下,我想要一个Javascript/jQuery或CSS解决方案,但会采取人们的任何建议.Flash建议也会有所帮助.

所以我的问题是:

• 上面的示例网站如何将所有图像排列在一起？我似乎无法找到任何CSS或Javascript代码吗？
• 有关于如何构建此类网站的任何建议(链接,教程或代码示例会很棒)？

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

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

这将使imgc出现在前面,imgb出现在imgc后面,imga落后于其他一切.的z索引属性分配一个元件进去的另一前.具有最大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设置为等于所点击的配件.

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

您可以根据需要创建任意数量的配件.假设你想在你的人之上添加更多的配件,那么你可以轻松地创建更多的图层,分配他们的z索引(甚至可以使用javascript动态地执行此操作,多么令人兴奋!)

总之,我希望你发现这个小教程很有用.出于您的目的,我建议您查看jQuery以及元素.它们将很有趣,当然可以帮助您的应用程序.

祝您好运.

Answer 2

您将必须使用position:absolute与定义的顶部和左侧位置的组合,以及z-index来控制哪些项目显示在顶部.

Answer 3

如果您正在寻找需要更少代码的解决方案,请尝试以下方法:

1. 在photoshop中创建您的艺术品,每个配件都在不同的层上
2. 将每个图层另存为单独的图像.确保使所有图像都具有完整的画布大小,并使用透明度.保存为PNG-24.这样,每个附件的位置将在图像中"硬编码",因此您无需在代码中处理它.
3. 创建一个容器<div>,然后给它position: relative;.
4. 将所有图像<div>作为<img>标记放入正确的顺序(堆叠图层,背景图像是第一个)
5. 适用position: absolute;于每一个<img>.

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