CSS掩碼圖像問題

Question

我試圖用條紋圖像掩蓋一些文本。當我檢查元素時，我可以看到蒙版圖像，但它不起作用。下方鏈接。

http://piersrueb.com/colors/

我得到了代碼從特倫特沃爾頓現場，奇怪的是，如果我從Trent的網站上覆制的圖像路徑，並將其放置在我的CSS它的工作原理。

http://trentwalton.com/2011/05/19/mask-image-text/

如果你能告訴我，我要去的地方錯了，我會很感激的。

Answer 1

面具圖像必須是單色的。其中的顏色將不起作用。

Answer 2

這與你的PNG有關。我不太確定爲什麼，但我很快用Chrome的網絡檢查工具替換了您的http://piersrueb.com/colors/img/stripes.png for Trent的http://trentwalton.com/wp-content/uploads/2011/05/mask.png，並開始工作。

我不能告訴你爲什麼會發生這種情況，也許是一些奇怪的圖像元？但我希望能幫助你弄清楚。 :)

Answer 3

我希望你正在尋找這樣的： -

http://jsfiddle.net/rD6wq/18/

您可以使用CSS3屬性-webkit-文本填充顏色：透明;透明文字&
-webkit-background-clip：text;呼叫在文本片段中的背景圖片....

但這些屬性只針對網絡套件瀏覽器的支持.....

HTML

<p>R</p> 

<p>T</p> 

<p>SUPER</p> 

CSS

p{ 
    font-size:5em; 
    font-family:impact; 
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed; 
position:relative; 
      -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text;   
    display:inline-block; 
    text-align:center; 
    padding:10px; 
} 
p:after{ 
    content:''; 
    position:absolute; 
    background:rgba(0,0,0,0.5); 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:-1; 
} 
body{ 
    background: url(http://farm8.staticflickr.com/7245/7086291447_06484c1d6a_z.jpg) fixed; 
}