在 HTML 中叠加图像答案

【问题标题】：Overlaying image in HTML在 HTML 中叠加图像
【发布时间】：2013-11-23 00:56:17
【问题描述】：

我正在创建一个简单的交互式娃娃装扮游戏，用户可以通过三个单独的下拉菜单选择不同的属性分配给娃娃，例如头发颜色、着装类型等。我有一个位于 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;
}

我已经在选择菜单中为每个选项指定了一个值，该值对应于 var 选项中的值，这里是头发颜色选项：

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

因此，对于每个选项，我希望它覆盖到基本图像上，但我尝试过的任何方法似乎都不起作用。我似乎唯一能找到的是“位置：相对”和“位置：绝对”解决方案，但由于我的图像不在 div 中，这将不起作用。任何人都可以做任何事情吗？

【问题讨论】：

方法是绝对位置和z-index ....你也可以管理你的base.png作为背景，然后在这里重叠div显示上的所有项目
如果您没有 div，您仍然可以将 classnames 分配给您的 img 检查此 jsfiddle.net/LQRT5/9

标签： javascript html image function overlay

【解决方案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 内的每个图像上使用绝对 position 和 z-indexing。例如，这里有一些 CSS styling 反映了这一点。

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

为了使定位更容易，我建议您保留大多数相似的图像，例如不同的头发类型，所有尺寸都相同，否则您将不得不为top 和left每一个。当然，最简单的选择是让所有不同的图像大小相同。

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

【讨论】：

【解决方案2】：

您应该能够使用绝对定位来使其工作，因为一切都存在于 'display_here' div 中。

您也可以使用 HTML5 Canvas 将衣服绘制到娃娃上。似乎是使用它的绝佳机会。

【讨论】：