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

Question

我希望有一个 Logo 延伸到一个黑条中，黑条将沿着整个屏幕顶部延伸，如下例所示:

我最初的想法是，有一种方法可以将 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>

但后来我想不出如何让 Logo 放在它上面。

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

感谢大家为此付出的时间和帮助。非常感谢!

Answer 1

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

Demo

#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>