如何在不使用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。