html - 如何使用 Bootstrap 将图像放在图像上

Question

知道如何在另一张图片的底部居中添加一张图片吗？ 我有以下代码:

http://pastebin.com/LMjQp4Ni

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

Answer 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>