相對於背景定位圖像

Question

我希望圖像的放置位置始終使其中心位於藍色背景的底部。 它看起來應該像這樣：

我可以使用top：37v; 但調整窗口高度的大小不會使其相對於背景的位置保持不變。

 .background{ background-image: url("https://i.imgur.com/5Y5F5fF.png"); background-repeat: no-repeat; background-size: cover; background-position: 0 100%; height: 50vh; } header img{ position: relative; height: 100px; /*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/ } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <header> <div class="container-fluid d-flex justify-content-center background"> <img src="https://i.imgur.com/3dzn4KM.png" alt="phone"> </div> </header> 

Answer 1

將以下兩行添加到樣式中：

header img{
     position: relative;
     height: 100px;
     top:50%;
     margin-top:-50px;
 }

這應該有所幫助。

Answer 2

您可以使用position: relative的組合position: relative和absolute如下所示：

 .background { background-image: url("https://i.imgur.com/5Y5F5fF.png"); background-repeat: no-repeat; background-size: cover; background-position: 0 100%; height: 50vh; position: relative; } header img { position: absolute; height: 100px; bottom: -50px; /*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/ } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <header> <div class="container-fluid d-flex justify-content-center background"> <img src="https://i.imgur.com/3dzn4KM.png" alt="phone"> </div> </header>