如何在不使用 position:absolute 的情况下使用 HTML/CSS 或 JavaScript 覆盖多个图像？

Question

我是 Google 的爱好者，因此在到达这里之前我已经彻底四处搜寻了。也许我只是不专心，或者我的浏览习惯又回来咬我了，但我相信我还没有找到答案。

我已经看到了类似问题的解决方案，但我认为其中任何一个都不适用于这里。 我想在一个元素中叠加两个相同大小的 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。