將文字置於圖像滑塊上？

Question

我對我的網站上的一些CSS工作有個簡單的問題。我需要幫助將一些文字放在圖像滑塊（www.ininkk.com）的頂部，就像它在頁面橫幅上的顯示方式：http://www.instacool.com.au/white-ink-printing/（它表示「白色墨水打印」）。任何幫助將不勝感激。謝謝！

Answer 1

OK，你必須把文本的位置是絕對的，是這樣的：

.image { 
position: relative; 
width: 100%; /* for IE 6 */ 
} 

h2 { 
position: absolute; 
top: 200px; 
left: 0; 
width: 100%; 
} 

Answer 2

這裏有一個快速codepen，需要一些造型，但應該讓你開始：

http://codepen.io/nilestanner/pen/LkoEZz

<div class="img-bg"> 
    <h2>some text</h2> 
</div> 

h2{ 
    padding:100px; 
} 

.img-bg{ 
    background:url('http://nilestanner.com/codepen/expanding-hover-tabs/vista-1.jpg'); 
    height:500px; 
}