在图像滑块上放置文本？

【问题标题】：Placing text over image slider?在图像滑块上放置文本？
【发布时间】：2016-08-22 07:34:52
【问题描述】：

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

【问题讨论】：

标签： css image text

【解决方案1】：

好的，您必须将文本位置设置为 absolute ，如下所示：

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

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

【讨论】：

【解决方案2】：

这是一个快速的代码笔，需要一些样式，但应该可以帮助您入门：

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

【讨论】：