将颜色和纹理与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;
}