html - 将颜色和纹理与 CSS 相结合 - 字体位于纹理上方

Question

如何使用伪 :after 元素在纯色背景之上添加纹理，同时将字体保持在纹理之上？例如 Font Awesome 上使用的那个网站。

使用 Font Awesome 网站和 CSS: Combine Texture and Color作为引用，我已经成功地将纹理叠加到我的背景颜色上，但我的字体也出现在纹理下。

这是我当前代码的 JSFiddle:http://jsfiddle.net/EvilClosetMonkey/xuBbq/

我已经尝试了几次调整，查看了多个类似的效果，但我还没有找到我遗漏的东西。

如何使字体“高于”纹理？

解决方案:

根据@JoshC 下面的回答，我添加了以下 CSS，因此所有内容(不仅仅是 h1)都显示在纹理上方。

.jumbotron .container
{
  position: relative;
  z-index: 1;
}

Answer 1

您可以简单地将 z-index 添加到 h1 元素。这将需要定位元素；因此也添加 position:relative:

UPDATED EXAMPLE HERE

.jumbotron h1 {
    color: #fff;
    font-size: 100px;
    text-shadow: 4px 3px 0 #df4566, 9px 8px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}