相對於背景圖像定位圖像

Question

CSS樣式的新功能。 我的頁面上有一個自適應的背景圖片，並且我想在其底部中央放置一個圓形徽標。 無論視圖多大/小我都希望該圖像保持在相同位置（相對於背景圖像的底部）。

我一直在研究圖像的填充和定位，但是都沒有響應。 當屏幕較小時，圖像向上移動。 較大時，圖像向下移動。 我希望它保持原樣。

這是我最近嘗試的一個小提琴：

https://jsfiddle.net/ybeuvn9m/

和代碼：

    <div class="container-fluid">
  <div class="row">
    <div class="splash col-sm-12">
      <div class="photo">
        <img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png">
      </div>
    </div>
  </div>
</div>

.logo {
  padding-top: 200px;
  width: 10%;
  margin: 0 auto;
  display: block;
}

.splash {
  background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: overlay;
}

Answer 1

您可能希望將其絕對定位在主圖像div中。 這是您的JSFiddle的修改版本： https ://jsfiddle.net/jameson5555/ybeuvn9m/1/

這是更新的.logo樣式。 您還需要添加position: relative對於您的容器，以使.logo的位置相對於其容器。

.logo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    margin-left: -20px;
    display: block;
}

Answer 2

如果我正確理解，您希望.photo始終位於.splash的中心。 為此，您應該使用Flex-box。

將以下內容添加到您的代碼中：

.parentDiv{
  display: flex;
  justify-content: center;
  align-items: center:
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ...供參考。

Answer 3

.logo { 
        padding-top: 150px; 
        width: 110px;
        margin: 0 auto;
        display: block;
      }

您的徽標應具有恆定的徽標寬度。