不透明度的垂直文本渐变

Question

我试图用CSS3或jQuery或SVG或画布实现以下，但我有一些困难。

四件事情是应该注意的：

1. 文本的梯度veritcal，并有不透明参与
2. 文本可以多行（它的客户端输入）
3. 有一个围绕文字的轮廓（文字阴影可能是合适的，不需要IE支持）
4. 背后有一个背景图片它。

最简单的解决方案是-webkit-linear-gradient，但尽管我喜欢Webkit，但我觉得我有责任作为开发者在一定程度上支持Firefox，Opera和IE。

克里斯Coyier用在他demo和我加了背景图片来显示它在行动：

由于没有出现在这个时候一个跨浏览器的选择，我会转向JavaScript和流行的jQuery寻求答案。其中几乎没有。

第一个是来自MRNIX的一个叫做PXGradient的整洁插件。你可以checkout his website，但全都用俄语。基本上使用该脚本输入一个HEX值数组，并找到它们之间的中间点，创建一个<u>标记和一个<s>标记，其中都包含父文本的内容。它创造了一个不错的效果。

虽然它不支持文本阴影和背景图像，它不支持透明度。我遇到了几个其他插件，它们可以执行类似于十六进制到十六进制的转换，但是他们都不支持我能找到的rgba。

Stackoverflow出现this related question，并引用Cufon。库丰是伟大的，但不允许文字阴影。

SVG也出现了，其中我找到了this example，但是SVG必须是当前的宽度和高度，我不知道这个文本是什么（它是由客户端输入的）。

（除非我们能得到文本的高度和宽度，动态追加SVG。但我的SVG的知识是非常可怕的，所以我可能需要一些帮助这一点。）

我已经看过在CSS选项，jQuery插件，SVG和画布，我没有太多的运气。

有没有人有我可以使用的想法？任何解决方案都会有帮助。

干杯！

Answer 1

这种效果在SVG中很容易实现，并且可以在所有现代浏览器中使用，包括IE10 +。

HTML/SVG

<img src="http://lorempixel.com/400/300"/> 

<svg width="400" height="300"> 
    <defs> 
     <linearGradient id="textgrad" x2="0" y2="1"> 
      <stop offset="0.65" stop-color="white" stop-opacity="0.7"/> 
      <stop offset="0.9" stop-color="white" stop-opacity="0"/> 
     </linearGradient> 
     <filter id="emboss"> 
      <feConvolveMatrix kernelMatrix="1 0 0 
              0 0 0 
              0 0 -1"/> 
     </filter> 
    </defs> 

    <text class="textblock fading"> 
     <tspan x="20" y="130">ERGY</tspan> 
     <tspan x="20" y="260">SOLU</tspan> 
    </text> 
    <text class="textblock embossing"> 
     <tspan x="20" y="130">ERGY</tspan> 
     <tspan x="20" y="260">SOLU</tspan> 
    </text> 
</svg> 

CSS

svg { 
    position: relative; 
    top: -300px; 
} 

.textblock { 
    font-family: sans-serif; 
    font-size: 130px; 
    font-weight: bold; 
} 

.fading { 
    fill: url(#textgrad); 
    stroke: white; 
    stroke-width: 0.5; 
    stroke-opacity: 0.5; 
} 

.embossing { 
    fill: white; 
    filter: url(#emboss); 
} 

Demo here