知道如何在另一张图片上添加底部中心的图像吗? 我有以下代码:
这会产生以下结果 - > http://imgur.com/a/gYmCu 那么在这种情况下如何在图像上做响应式图像呢?我希望狗在自然图像的中间底部?
答案 0 :(得分: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>
&#13;
答案 1 :(得分:0)
您可以做的是添加一个边距(%),以便根据屏幕的大小进行放置。我也取出了你的宽度(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}}
答案 2 :(得分:0)
您可以使用一个大图像作为div的背景图像,然后您可以在该div中添加新图像。
答案 3 :(得分:0)
绝对定位将帮助您实现这一目标。
.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>