如何讓徽標進入/覆蓋屏幕頂部的黑色條？

我期待有一個標誌延伸到一個黑條如在下面的例子中看出，將沿着屏幕的整個上運行： image example for what I want to achieve 如何讓徽標進入/覆蓋屏幕頂部的黑色條？

我最初的想法是，將有添加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中這樣做，如果可能的話，不必使用黑色圖像。

謝謝大家在這裏的時間和幫助。我非常感謝！

來源

2013-01-11 kkirsche

你能不能設置上邊距要像'-20px'什麼？ –

這個怎麼樣：設置一個上邊框，然後是一個相同數量的負邊距。您的圖片需要透明，與我在示例中使用的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>

來源

2013-01-12 00:04:01 sachleen

立即嘗試。謝謝！ – kkirsche

完美工作。謝謝！ – kkirsche

如何讓徽標進入/覆蓋屏幕頂部的黑色條？

回答

相關問題