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

【问题标题】：How to have logo go into / overlay black bar along the top of screen?如何让徽标进入/覆盖屏幕顶部的黑条？
【发布时间】：2013-01-12 08:04:01
【问题描述】：

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

我最初的想法是，有一种方法可以将 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 中执行此操作，并且如果可能的话不必使用黑色图像。

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

【问题讨论】：

你不能将上边距设置为-20px 之类的吗？

标签： html css twitter-bootstrap

【解决方案1】：

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

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>

【讨论】：

现在试试。谢谢！
完美运行。谢谢！