如何使用HTML / CSS或JavaScript叠加多个图像，而不使用position：absolute？

Question

我是谷歌爱好者，因此在到达这里之前我已经非常彻底地寻找过。也许我只是在不专心，或者我的撇脂习惯会回来咬我，但我不相信我已经找到了答案。

我已经看到类似问题的解决方案，但我不认为它们中的任何一个都适用于此。 我想在元素中叠加两个相同大小的PNG ;这本身很简单，但背景稍微复杂一些。我已经使用HTML / CSS很长一段时间了，我现在正在学习JavaScript;因此，我一直在制作HTML游戏。这个游戏涉及创造具有不同特征的动物，我为每个特征绘制了PNG，并用透明背景分别保存。这里，作为参考，是一个例子：

基本图片：

我希望为女性青蛙覆盖睫毛：

我熟悉使用position：absolute来叠加图像，但我无法给出绝对位置;这些生物将使用innerHTML自动显示给一个div，这会产生两个问题：一个，并非每个生物都处于相同的绝对位置，两个，有些在用户向下滚动之前是不可见的。我还考虑过将背景图像设置为一个图像，但是有些场景需要覆盖多达四个单独的图像，因此无法正常工作。我遇到过关于jQuery的一些神秘的可能性，但由于我在学习上还没有那么深入，如果有人能够帮助我，我会非常感激。唯一的另一种选择是手动叠加并保存每个可能的组合作为图像，这将需要数百个图像，所以我热切希望我可以不惜一切代价避免这条路。

如果我只是愚蠢而且解决方案已经处于我考虑和丢弃的可能性之一，请告诉我。

Answer 1

如果你无法定位它绝对我认为唯一的解决方案是多个背景（CSS3）：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

http://www.css3.info/preview/multiple-backgrounds/

当您需要添加或删除特定背景时出现问题...您需要专门创建的功能来添加背景并将其从图层中删除。

顺便说一句，我建议您尝试将它们移动到绝对位置，因为它比使用多个背景更容易。

请记住，您可以在相对定位的div中使用position: absolute，因此absolute定位将相对于相对定位的div。