我正在寻找在文本中添加渐变。网络图们有一个快速提示关于那个。但它仅适用于 webkit 浏览器。由于这是相当老的帖子,我正在检查是否有任何跨浏览器解决方案(忽略 ie)。
我知道如何使用背景渐变图像
我知道在 Firefox 中实现此功能的唯一方法是通过 SVG,不幸的是这有点笨拙。好的部分是它也应该在 Opera 和 IE9 中工作(未经测试)。如果 doctype 被声明为 XHTML 并以 XML 形式提供,则将在 Firefox 3.6 中工作(呃)。
<svg height="200" width="500">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(60,60,60); stop-opacity:1"/>
</linearGradient>
</defs>
<text x="0" y="150" font-family="Arial Black, Arial" font-size="55" fill="url(#gradient)" letter-spacing="-1" class="svg_text">
NICE GRADIENT
</text>
</svg>
在 JSFiddle 上查看http://jsfiddle.net/sHaWW/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)