HTML中的图像叠加

Question

我正在创建一个简单的互动娃娃换装游戏，用户可以通过三个独立的下拉菜单选择不同的属性来分配给娃娃，例如发色、衣服类型等。

我有一个基础图像，在 div 中，我想在上面叠加图片。

<div id="display_here"> 
<img src="base.png" />
</div>

图片是通过一个函数调用的：

function createDoll(userChoice) {
var output = document.getElementById("display_here");
output.innerHTML = "";


var links = [
    "redhair.png",
    "blondehair.png",
    "brownhair.png",
];

var choices = ["Red", "Blonde", "Brown", "Vintage", "Skater", "Plaid", "Heels", "Brogues", "Pumps"];

var img = '<img src="' + links[userChoice] + '">';

output.innerHTML = img;
}

我已经给选择菜单中的每个选项赋值，这些值对应于变量 choices 中的值，这是 "发色" 选项：

<p>
What hair will your doll have?
<select name="choice" id="choice" onchange="createDoll(this.value)">
<option value="0">Red</option>
<option value="1">Blonde</option>
<option value="2">Brown</option>
</select>
</p>

因此，对于每个选项，我希望它能够覆盖在基础图像上，但是我尝试的所有方法似乎都不起作用。我所能找到的唯一解决方案是使用“position:relative”和“position:absolute”，但由于我的图像不在一个div中，这种方法行不通。有人能想到任何可能有效的解决方案吗？

- Niamh McKenna

---

方法是使用绝对定位和z-index....您还可以将base.png作为背景管理，然后重叠所有在此处显示的div中的项目。 - DaniP

如果您没有div，仍然可以为图像分配class名称，请查看此链接http://jsfiddle.net/LQRT5/9/。 - DaniP

Answer 1

我注意到的第一件事是 output.innerHTML = "";，它会删除你的 base.png 图片。我认为这不是你想要做的事情。

因此，处理这个问题的一种方法是将可能需要的所有图片都放在那里，但保持隐藏或具有空的 src 属性，直到需要它们。

<div class="overlay-container"> 
    <img class="overlay" src="base.png">
    <img class="overlay" id="hair">
    <img class="overlay" id="clothing1">
    <img class="overlay" id="clothing2">
</div>

然后在你的函数中，你可以像这样做。

function createDoll(userChoice) {
    var links = [
        "redhair.png",
        "blondehair.png",
        "brownhair.png"
    ];

    document.getElementById('hair').src = links[userChoice];
}

至于处理叠加的问题，您需要在相对定位的 div 中使用绝对 定位，并在每个图像上使用 z-index 属性。例如，以下是一些反映此方法的 CSS 样式。

.overlay { position: absolute; }
.overlay-container { position: relative; }
#hair { z-index: 10; }
#clothing1 { z-index: 20; }
#clothing2 { z-index: 21; }

---

为了更容易地定位，我建议将大部分相似的图像（例如不同的发型）保持相同的大小，否则您将不得不为每个图像提供不同的top和left CSS样式坐标。当然，最简单的选择是使所有不同的图像都具有相同的大小。

希望这对您有所帮助，祝您好运！

- Ryan Stein

Answer 2

你应该能够使用绝对定位来使其工作，因为所有内容都存在于“display_here” div 中。

你也可以使用 HTML5 Canvas 将衣服画在玩偶上。看起来是使用它的完美机会。

- msanteler