CSS幫助 - div的圖像

Question

我正在爲我的大學項目製作一個小網站，大部分都是完整的，但我堅持我應該如何去添加一個功能。

如果您訪問類似http://wallbase.cc/toplist的網站並翻轉圖像，您會看到圖像底部會顯示一個小小的黑條，顯示尺寸。我想將它添加到我的網站，但我不知道要使用什麼CSS規則來使黑色條顯示在圖像的頂部，我嘗試過的其他所有內容都會轉到圖像的一側或浮動這一頁。

該頁面將使用jQuery + DOM產生，但是最終的結果看起來有點像：

<div id="content"> 
    <div class="error" id="pretext">Showing x results</div> 
    <div class="image"><img src="imagelink" height="200" width="200" alt="thumb"></img></div> 
</div> 

而且我的相關CSS規則：

#content { 
    background: #FBFBFB; 
    border: solid 1px #CCC; 
    border-top: none; 
    border-bottom: none; 
    padding: 15px; 
} 

.image { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #CCC; 
    display: inline-block; 
    margin: 5px; 
} 

Answer 1

如何讓主人<div>與背景圖像？

<div class="image" style="background-image: ('/images/whatever.jpg');"> 
    <div class="footerBar">[content]</div> 
</div> 

樣式他們與CSS或使用JavaScript設置圖像。

.image { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.footerBar { 
    background-color: lightGrey; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
    display: none; 
} 
.image:hover .footerBar { 
    display: block; 
} 

見例如在jsFiddle

Answer 2

嘗試在DIV你設置position: absolute想要在圖像上定位。

Answer 3

犀牛的想法是好的，但你要footerbar的positioon設置爲靜態的，因此它保持div.image內

.image { 
    width: 200px; 
    height: 150px; 
    background-image: url("/images/whatever.jpg"); 
    position:inline-block; 
    border:1px solid green; 
} 
.footerBar { 
    position: static; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
} 

<div class="image"> 
    <div class="footerBar">[content]</div> 
</div> 

否則你」 d必須使用javascript來查找圖像相對於頁面的位置，並使用更高的z-index將文本放在絕對位置。