在透明背景上创建不透明文本渐变 [英] Making an opacity text-gradient over a transparent background

问题描述

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

it should look like http://img190.imageshack.us/img190/1686/textgradient.jpg
the tricky part is, it should work for opera, canvas..? also important: the transparency is only needed for the big texts in the screenshot.

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


我不会使用画布或类似的东西来显示文本。 / p>

the text is simple html text in a span tag. the background is a somewhat transparent png, defined as css background-image of the container div.

i'd have no problems with using canvas or something like that for displaying the text.

推荐答案

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

well, it was a long day, and i've found a solution by myself. it uses canvas.

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

for a canvas with html height 73px and width 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);

这篇关于在透明背景上创建不透明文本渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！