相对于背景图像定位图像答案

【问题标题】：Positioning image in relation to background image相对于背景图像定位图像
【发布时间】：2016-02-26 07:11:52
【问题描述】：

CSS 样式的新功能。我的页面上有一个响应式背景图像，我希望在其底部中心放置一个圆形徽标。无论视图有多小/大，我都希望此图像保持在相同的位置（相对于背景图像的底部）。

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

这是我最近尝试的一个快速小提琴：

还有代码：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您可能希望将其绝对定位在主图像 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;
}

【讨论】：

谢谢，看起来很棒。我仍然遇到一件事：让徽标一半在背景图像上，一半在其下方的空白处。

【解决方案3】：

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

您的徽标应具有徽标的恒定宽度。

【讨论】：