问如何使用HTML/CSS或JavaScript覆盖多个图像，而不使用位置:绝对？

EN

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

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

基本图像：

​

​

我想给雌性青蛙涂上睫毛：

​

​

我很熟悉使用位置:绝对叠加图像，但我不能给出一个绝对位置；这些生物将使用innerHTML自动显示给另一个div，这就出现了两个问题:一是不是每个生物都处于相同的绝对位置，二是在用户滚动之前，有些生物是不可见的。我还考虑过将背景图像设置为一幅图像，但是会有一些场景需要最多覆盖四个单独的图像，所以这是行不通的。关于jQuery，我遇到了一些神秘的可能性，但是由于我还没有学到那么多，如果有人能帮助我，我会非常感激的。唯一的其他选择是手动覆盖和保存每一个可能的组合作为一个图像，这将需要数百张图片，所以我热切希望我可以避免这条道路不惜一切代价。

如果我只是在做蠢事，而解决方案已经在我考虑过和放弃的可能性之一，请告诉我。