具有不透明度的垂直文本渐变

Question

我正在尝试使用 CSS3 或 jQuery 或 SVG 或画布实现以下目标，但我遇到了一些困难。

需要注意的四点：

1. 文本的渐变是垂直的，并且涉及不透明度
2. 文本可以是多行的（由客户端输入）
3. 文本周围有一个轮廓（文本阴影可能是合适的。不需要 IE 支持。）
4. 后面有一张背景图片。

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

Chris Coyier 在他的demo 中使用，我添加了背景图片来展示它的实际效果：

由于目前似乎没有跨浏览器替代方案，因此我将求助于 JavaScript 和流行的 jQuery 来寻找答案。哪有几个。

第一个是来自 MRNIX 的一个简洁的插件，叫做 PXGradient。你可以checkout his website 但都是俄语。基本上要使用该脚本，您输入一个十六进制值数组，它会找到它们之间的中间点，在其中创建一个<u> 标签和一大堆<s> 标签，所有这些都包含父文本的内容。它创造了一个很好的效果。

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

Stackoverflow 提出了this related question，并引用了 Cufon。 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