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

Question

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

需要注意的四点:

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 和 Canvas ，但我的运气并不好。

有人知道我可以使用什么吗？任何解决方案都会有所帮助。

干杯!

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