使用CSS在页脚中覆盖图像

Question

因此，我有一个包含8个图像（4个按钮和4个图标）的页脚，其想法是在相应按钮上显示4个图标中的每个图标。如果我使用position:relative，它们只是一个接一个地显示，因此要分离8张图像，而看起来必须只有4张图像。

这就是我想要得到的：

这是我得到的：

我的CSS：

.absolute {
    position: absolute;
}
    #footer {
        position: fixed;
        bottom: 0;
        width: 90%;
        height: 10%;
        -webkit-transform: translate(-50%, -50%); 
        left: 50%;
        display: flex;
        justify-content: space-between;
    }
    #footer img {
        height: 100%;
    }

我的html：

<div id="footer">
   <img class="absolute" src="img/back.png" />
   <img src="img/empty_circle_button.png" />
   <img class="absolute" src="img/gems_btn.png" />
   <img src="img/empty_circle_button.png" />
   <img class="absolute" src="img/up.png" />
   <img src="img/empty_circle_button.png" />
   <img class="absolute" src="img/missions.png"  />
   <img src="img/empty_circle_button.png" />
</div>

我还需要此内容在Web视图中有效。对这里出什么问题有什么建议吗？

Answer 1

好吧，我自己找到了解决方法：

HTML：

<div id="footer">
   <div><img src="img/back.png" /></div>
   <div><img src="img/gems_btn.png" /></div>
   <div><img src="img/up.png" /></div>
   <div><img src="img/missions.png" /></div>
</div>

CSS：

#footer {
    position: fixed;
    bottom: 0;
    width: 90%;
    height: 10%;
    -webkit-transform: translate(-50%, -50%); 
    left: 50%;
    display: flex;
    justify-content: space-between;
}
#footer div {
    background-image: url(../img/empty_circle_button.png);
    background-size: contain;
    height: 100%;
    background-repeat: no-repeat;
}
#footer div img {
    height: 100%;
}