CSS渐变文字效果的两种方法比较

是否要在没有photoshop的情况下创建带有渐变的标题文本？这里有一个简单的css技巧来告诉你如何使用css和png图片来创建这种效果。经过测试，该方法适用于大多数主流浏览器。当然，IE6需要一个支持透明PNG的Hack(幸运的是，微软正在尽最大努力自动将用户的IE6升级到IE 7。扩展阅读：警告： anie7 auto-updateiscing soon)优点这是一个纯css技能，不需要使用任何ja脚本或flash，可以在大多数浏览器上正常工作(IE6需要hack支持透明PNG)。这是一个完美的标题设计，你不需要photoshop，这将为你节省大量的带宽和时间。您可以在任何网页字体上使用此效果，字体大小也是可变的。他。

这个技巧很简单。我们只是使用一个宽度为1px的透明png来覆盖文本。html CSSGradientText CSS的键在这里是3360 h1 { position : relative } h1 span { position : absolute } h1 { font : bold 330%/100% ' lucida grande '；位置：相对；color: # 464646} h1 span { background : URL(grade . png)repeat-x；位置：绝对；显示：块；宽度：100%；height:31px}就这样，你做到了。_单击此处查看示例。以使其支持IE6。下面的黑客只是为了让IE6支持透明的PNG-24格式图片。-[IFTie 7]style h1 span { background : none；filter : progid : maximagettransform。Microsoft . alpha imageloader(src=' gradient . png '，sizing method=' scale ')；} /style！[endif]jquery生成的版本如果您不希望代码中有空的span标记，可以使用javascript动态生成它。这里有一个简单的jquery生成方法。script type=' text/JavaScript ' src=' http : jquery . js ' src=' http : jquery . js '/script script type=' text/JavaScript ' $(文档)。ready(function(){//prependspantagtoh 1 $(' h1 '))。前置(' span/span ')；});/script DEMO包下载。