html - HTML 中的渐变文本效果

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。

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