Question

它应该看起来像http://img190.imageshack.us/img190/1686/textgradient.jpg这个棘手的部分是，它应该适用于歌剧，画布..？同样重要的是：屏幕截图中的大文本只需要透明度。

文本是span标记中的简单html文本。背景是一个有点透明的png，定义为容器div的css背景图像。

使用画布或类似的东西来显示文字我没有问题。

Answer 1

如果只有Cufón支持“开箱即用”的水平线性渐变，那么您就会为简单的<canvas>解决方案进行排序。有趣的是，cufon supporting a horizontal linear gradient上的对话刚刚在过去的24小时内开始。下面的演示使用rgba演示了Cufón的垂直线性渐变。

演示：jsfiddle.net/Marcel/35PXy（fullscreen）

Answer 2

好吧，这是漫长的一天，我自己找到了解决方案。它使用画布。

用于html高度为73px且宽度为720px的画布：

var ctx = myCanvasEl.getContext("2d");
ctx.font = "53pt Arial, Helvetica, sans-serif";
var gradient = ctx.createLinearGradient(400, 0, 650, 0);
gradient.addColorStop(0, "rgb(255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.fillText(myText, 0, 58);

Answer 3

我能想到的最简单的方法是创建背景图像的副本，进入photoshop并创建一个大部分透明的渐变。然后在文本上叠加渐变。我相信这会在每个浏览器中都有效。

Answer 4

你不再需要画布了。使用属性background-clip: text结合渐变背景和rgba（alpha通道到完全透明）。

这是一个例子： http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html

这很棒，但目前仅适用于webkit浏览器。

要获得更兼容的解决方案，您可以查看mask-image http://trentwalton.com/2011/05/19/mask-image-text/ 与第一种方法类似，您应该将蒙版淡入完全透明度以获得您想要实现的效果。

在透明背景上制作不透明度文本渐变

4 个答案:

演示：jsfiddle.net/Marcel/35PXy（fullscreen）