CSS webkit圖像蒙版不起作用

Question

我試圖按照一些應用蒙版的教程，但每當我將任何東西應用到我的h1時，所有文本都會完全消失。我嘗試過使用圖像蒙版和漸變，併發生同樣的事情。

<h1 id="site-name"> 
    <a href="/" title="Home"><span>The Biospheric Project</span></a> 
</h1> 

CSS使用梯度

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)), 
    to(rgba(0,0,0,.2))); 
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6); 
} 

Answer 1

您的解決方案似乎工作原樣。

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)), 
    to(rgba(0,0,0,.2))); 
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6); 
} 

看到這個小提琴：

http://jsfiddle.net/2crma/

當然它可以在WebKit瀏覽器才能正常工作。