我是谷歌爱好者，因此在到达这里之前我已经彻底地四处寻找。也许我只是不专心，或者我的浏览习惯又回来咬我了，但我相信我还没有找到答案。
我已经看到了类似问题的解决方案，但我认为它们中的任何一个都不适用于这里。我想在一个元素中覆盖两个相同大小的 PNG；这本身很简单，但上下文有点复杂。我已经使用 HTML/CSS 很长时间了，目前我正在学习 JavaScript；因此，我一直在制作 HTML 游戏。这个游戏涉及创建具有不同特征的动物，我为每个特征绘制了 PNG，并用透明背景分别保存它们。这里，作为参考，是一个例子：
基础图片：
我想为雌性青蛙叠加的睫毛：
我熟悉使用 position:absolute 来叠加图像，但我不能给出绝对位置；这些生物将使用 innerHTML 自动显示到一个 div 中，这会带来两个问题：第一，并非每个生物都处于相同的绝对位置，第二，有些生物在用户向下滚动之前是不可见的。我也考虑过将背景图像设置为一张图像，但有些场景需要最多叠加四张单独的图像，所以这是行不通的。我遇到了一些关于 jQuery 的神秘可能性，但是由于我的学习还没有那么远，如果有人能够帮助我，我将非常感激。唯一的另一种选择是手动覆盖并将每个可能的组合保存为图像，
如果我只是愚蠢并且解决方案已经在我考虑并丢弃的可能性之一中，请告诉我。