0

以下の例に示すように、画面の上部全体に沿って走る黒いバーにロゴを拡張したいと考えています。 私が達成したいことの画像例

私の当初の考えでは、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 で行うことを好み、可能であれば黒い画像を使用する必要はありません。

ご協力いただきありがとうございました。大変感謝しています！

4

1 に答える 1

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>

于 2013-01-12T00:04:01.310 に答える