Question

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

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

Answer 1

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

您可以做的是添加一个边距（％），以便根据屏幕的大小进行放置。我也取出了你的宽度（250像素）并使其达到了％，因此它会根据屏幕尺寸增大和缩小。

https://jsfiddle.net/4gesrw5r/

{"latitude":59.433335,"longitude":24.750486,"timezone":"Europe/Tallinn","offset":2,"currently":{"time":1485880052,"summary":"Clear","icon":"clear-night","precipIntensity":0,"precipProbability":0,"temperature":0.76,"apparentTemperature":-3.34,"dewPoint":-0.13,"humidity":0.94,"windSpeed":3.99,"windBearing":262,"visibility":9.99,"cloudCover":0.11,"pressure":1017.72,"ozone":282.98}}

Answer 3

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

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

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

4 个答案: