Question

如何在不使用html中的图像的情况下在文本上显示渐变填充效果。

Answer 1

如果您希望文本本身具有渐变，则可以在http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/使用CSS3。另一种选择是使用Javascript，虽然不能真正详细说明，因为我不太了解它。我相信许多Javascript框架，例如MooTools或jQuery，都具有相应的功能。如果他们不这样做，我相信你可以为jQuery找到一个插件。

如果您希望文本背景具有渐变，那么可以使用CSS3：

/*
 Format: background: gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);
 Use -mozilla-gradient or -webkit-gradient as these are the only browsers that support it (that I know of).
 For example, an aqua coloured gradient in a Webkit browser:
*/

.text {
 -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));

}

Internet Explorer不支持CSS3，也不太可能在不久的将来，并且考虑到大多数互联网用户都在使用IE，这不是一个好的解决方案。

Javascript是一种可能性，但很多人因为它可以携带的安全风险以及早年的恶劣声誉而关闭了Javascript。

因此，图像是您可以保证跨浏览器兼容性的唯一方法。糟透了，不是吗？

Answer 2

常规图像（png，gif和jpg）的替代方案是使用W3C推荐的SVG（可缩放矢量图形）格式。据我所知，目前只有Firefox 3+和Opera 9+本身支持，尽管你可以获得IE6-8的Adobe SVG Viewer插件。

对于免费的矢量图形编辑器，请查看Inkscape

SVG格式被wikipedia.org广泛使用。 Wikipedia SVG logo

HTML中的渐变文本效果

2 个答案: