在透明背景上进行不透明的文本梯度
它应该看起来像 http://img190.imageshack.us/img190/1686/textgradient.jpg
棘手的部分是，它应该适用于歌剧、画布……？同样重要的是：只有屏幕截图中的大文本才需要透明度。
文本是 span 标记中的简单 html 文本。背景是有点透明的 png，定义为容器 div 的 css 背景图像。
我使用画布或类似的东西来显示文本没有问题。
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.
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果只有 Cufón 支持“开箱即用”的水平线性渐变，那么您就会被排序为简单的
解决方案。有趣的是，关于支持水平线性渐变的 cufon 的对话只是在过去 24 小时内开始。下面的演示演示了使用 rgba 实现垂直线性渐变的 Cufón。演示：jsfiddle.net/Marcel/35PXy (全屏)
If only Cufón supported a horizontal linear gradient "out of the box" you would have been sorted for an easy
<canvas>solution. Funnily enough, a conversation on cufon supporting a horizontal linear gradient was just started in the last 24 hours. The demo below demonstrates Cufón with a vertical linear gradient usingrgba.Demo: jsfiddle.net/Marcel/35PXy (fullscreen)
好吧，这是漫长的一天，我自己找到了解决方案。
它使用画布。
对于 html 高度为 73px、宽度为 720px 的画布：
well, it was a long day, and i've found a solution by myself.
it uses canvas.
for a canvas with html height 73px and width 720px:
我能想到的最简单的方法是创建背景图像的副本，进入 Photoshop 并创建一个大部分透明的渐变。然后将渐变叠加在文本上。我相信这适用于所有浏览器。
The simplest way to do this that I can think of is to create a copy of the background image, go into photoshop and create a gradient that's mostly transparent. Then overlay the gradient on the text. That'll work in every browser, I believe.
您不再需要画布了。使用属性
background-clip: text与带有 rgba 的渐变背景（Alpha 通道到完全透明）相结合。这里有一个例子：
http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html
很棒，但它目前仅适用于 webkit 浏览器。
要获得更兼容的解决方案，您可以查看
mask-imagehttp://trentwalton.com/2011/05/19/mask-image-text/与第一种方法类似，您应该将蒙版淡入完全透明以获得您想要实现的效果。
You don't need canvas anymore. Use property
background-clip: textcombined with a gradient background with rgba (alpha channel to full transparency).Here an example:
http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html
It's great but it works just in webkit browser, at this time.
For a more compatible solution you can look at
mask-imagehttp://trentwalton.com/2011/05/19/mask-image-text/Similar to the first method, you should fade mask to full transparency to get the effect you want to realize.