将文字放在图片滑块上？

Question

关于我网站上的某些CSS工作，我有一个快速问题。 我需要在图像滑块（www.ininkk.com）顶部放置一些文本的帮助，就像它在页面横幅上的外观一样： http : //www.instacool.com.au/white-ink-printing/上面写着“白色墨水打印”）。 任何帮助将不胜感激。 谢谢！

Answer 1

好的，您必须将文本位置设置为绝对，像这样：

.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;
}