html - 如何让徽标进入/覆盖屏幕顶部的黑条？

Question

我希望将徽标延伸到将沿整个屏幕顶部运行的黑条中，如下例所示：

我最初的想法是，有一种方法可以将 CSS 添加到正文中，只需在顶部做一个边框，类似于：

body {
    border-top: .5em solid #000;
}

由于我不相信这是解决方案，因此我在考虑以下 HTML 的内容，但无法使其正常工作。

<div id="topBlackBar">
    <div class="container"><!--Per Bootstrap-->
        <div class="span2">
            <img src="img/logo.png" alt="Bachner+Co Logo" />
        </div>
    </div>
</div>

但后来我不知道如何让徽标出现在它上面。

我使用 Twitter Bootstrap 2.2.2 作为构建它的框架。我宁愿主要在 CSS 中执行此操作，如果可能的话，不必使用黑色图像。

感谢大家在这方面的时间和帮助。我非常感谢！

Answer 1

怎么样：设置一个顶部边框，然后设置一个相同数量的负边距。您的图片需要是透明的，这与我在示例中使用的 Google 徽标不同。

演示

#topBlackBar {
  border-top: 50px solid #000;
}

#logoContainer {
  margin-top: -50px;
}

<div id="topBlackBar">
  <div class="container" id="logoContainer"><!--Per Bootstrap-->
    <div class="span2">
      <img src="https://www.google.com/logos/2012/birthday12-hp.jpg" alt="Bachner+Co Logo" />
  </div>
</div>