將顏色和紋理與CSS結合在一起 - 字體在紋理上方

Question

如何在使用僞:after元素的情況下在純色背景上添加紋理，同時將紋理保留在紋理頂部？如在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; 
}