使用css将图像覆盖在页脚中的图像上
使用css将图像覆盖在页脚中的图像上
提问于 2018-06-23 06:11:43
所以我有一个包含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>我还需要这是一个有效的网络视图。对这里的问题有什么建议吗？
回答 1
Stack Overflow用户
发布于 2018-06-23 06:41:56
好的，我自己找到了解决方案：
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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50996181
复制相关文章
相似问题