html - 相对于背景图像定位图像

Question

CSS 样式的新手。我的页面上有一个响应式背景图片，我想在它的底部中心放置一个圆形 Logo 。我希望这张图片保持在相同的位置(相对于背景图片的底部)，无论 View 有多大/多小。

我一直在摆弄图像填充和定位，但两者都没有响应。当屏幕较小时，图像会向上移动。当它变大时，图像向下移动。我希望它保持在相同的位置。

这是我最近尝试的一个 fiddle :

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

如果我理解正确，您希望 .photo 始终位于 .splash 的中心。为此，你应该使用 Flex-box。

将以下内容添加到您的代码中:

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... 以供引用。