如何使用引导程序将图像放置在图像上答案

【问题标题】：How to place an image over an image with bootstrap如何使用引导程序将图像放置在图像上
【发布时间】：2017-06-17 04:26:16
【问题描述】：

知道如何添加一个位于另一个图像底部中心的图像吗？我有以下代码：

http://pastebin.com/LMjQp4Ni

这会产生以下结果 -> http://imgur.com/a/gYmCu 那么在这种情况下如何在图像上做响应式图像呢？我想让狗在自然图像的中间底部？

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

要将图像放在图像上，请在顶部图像上使用绝对定位。

.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
}

.bg-1 {
  background-color: #4CB5F5;
  color: white;
}

.img-2 {
  position: absolute;
  width: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container-fluid bg-1 text-center">
	<img class="img-responsive" 			src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
	<img class="img-responsive img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

【讨论】：

transform 拼写错误：transform: translate(-50%, -50%);
谢谢，我可以使用绝对定位来做到这一点。

【解决方案2】：

您可以添加一个边距 (%)，以便根据屏幕大小放置它。我还取出了你的宽度（250 像素）并将其设置为 %，以便它根据屏幕尺寸增长和缩小。

https://jsfiddle.net/4gesrw5r/

.img-2 {
display: inline;
width: 20%;
height: 20%;
margin-top: -25%;
}

【讨论】：

谢谢。我能够用 margin% 定位它，感谢有关缩放的提示。

【解决方案3】：

您可以使用一个大图像作为 div 的背景图像，然后您可以在该 div 中添加新图像。

【讨论】：

【解决方案4】：

绝对定位将帮助您实现这一目标。

   .under
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    .over
    {
    position:absolute;
    left: calc(50% - 125px);
    bottom:0px;
    z-index:-1;
    width: 250px;
    height: auto;
    }

<div class="container-fluid bg-1 text-center">
    <img class="img-responsive under"             src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
    <img class="over img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

演示：https://jsfiddle.net/g2skfjbL/

【讨论】：