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

【问题标题】：Making an opacity text-gradient over a transparent background在透明背景上制作不透明文本渐变
【发布时间】：2011-07-26 19:07:53
【问题描述】：

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

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

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

【问题讨论】：

您能向我们展示您到目前为止的工作吗？
你能提供更多细节吗？ - 这是图像还是可编辑文本？
对于这些小细节很抱歉，我已经编辑了我的问题

标签： css html opacity gradient

【解决方案1】：

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

演示：jsfiddle.net/Marcel/35PXy (fullscreen)

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

我能想到的最简单的方法是创建背景图像的副本，进入 Photoshop 并创建一个基本透明的渐变。然后在文本上叠加渐变。我相信这适用于所有浏览器。

【讨论】：

这种方法的问题是，原始背景图像已经是透明的。结果是，文本不能比背景更透明

【解决方案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/ 与第一种方法类似，您应该将遮罩淡化为全透明以获得您想要实现的效果。

【讨论】：