如何在渐变背景上使用投影执行文本渐变？

Question

这就是我需要在CSS中实现的（它非常难看，但它很好地展示了我的问题）：

我们在文本上有一个渐变，在背景上有一个带阴影的阴影。

我已经尝试了我能找到的每一种方法。

This method无法使用文字阴影。

PNG叠加方法不起作用，因为我没有纯色背景。

This method不起作用，因为它要求我将文本字符串放在CSS中，我的文本将是动态的。

所以，我很难过。

它不需要在每个浏览器中工作（如果需要，我可以忽略IE）。如果它只适用于Webkit浏览器，那也没关系。

Answer 1

这应该是答案：

<强> HTML

<h1><span>Filthy</span></h1>

<强> CSS

h1 {
   position: relative;
   font-size: 300px;
   line-height: 300px;
   text-shadow: -3px 0 4px #006;
}
h1 span {
   position: absolute;
   top: 0; 
   z-index: 2;
   color: #d12;
   -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
   content: attr(cssFilthyHack);
   color: #000;
   text-shadow: 3px 3px 1px #600;
}

<强> JS

$('h1').each(function(i, e){
    var el = $(e);
    el.attr('cssFilthyHack', el.find('span').html());
});

---

重要的是使用content: attr(cssFilthyHack);从h1文本中提取文本。您可以在html中第二次添加文本，如此

<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>

或者您使用js jQuery方法自动执行此操作。

---

<强>更新

用span替换了a标签，添加了js函数。

请参阅此处的示例：http://jsfiddle.net/alligator/Gwd3k/