gradient - 如何在渐变背景上制作带有阴影的文本渐变？

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 方法自动执行此操作。

---

更新

将a标签替换为span，添加js功能。

查看此处的示例:http://jsfiddle.net/alligator/Gwd3k/