CSS文本效果两种方法的比较

你是否想用PS图象处理软件创造一个与文本在一个简单的CSS技术职称梯度向您展示如何使用CSS和PNG图像能产生这种效果。经过测试，这种方法适合大多数主流浏览器。当然，IE6需要支持透明PNG的黑客（值得庆幸的是微软对用户的IE6升级到IE7自动^。^，警告：一个IE7自动更新阅读：快来了）

优势

这是一个纯CSS技术，不使用任何JA脚本或闪光，它可以正常工作在大多数浏览器（IE6需要支持透明的PNG的黑客）。
这是一个完美的设计，你不必使用PS图象处理软件，这将节省你很多的时间和带宽。
可以对任何页面字体使用此效果，字体的大小也是可变的。
他是如何工作的
这是一个非常简单的技术。我们简单地使用1px宽透明PNG覆盖文本。

HTML

CSS渐变文本

CSS

关键就在这里：

H1位置：相对}
H1跨度{位置：绝对}
字体：黑体330% / 100%Lucida Grande；
职位：相对；
颜色：# 464646；
}
H1跨度{
背景：URL（梯度。PNG）repeat-x；
位置：绝对的；
显示块；
宽度：100%；
身高：31px；
}

所以，在这里，比如你^ _ ^点击。

使它能够支持IE6

下面的技巧只有一张图片，让IE6支持透明PNG-24格式。

H1跨度{
背景：无；
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（SRC = 'gradient。png，sizingmethod =规模）；
}

jQuery代版本

如果您不想在代码中有空标记，可以使用Javaｓｃｒｉｐｔ动态生成它。这是一个简单的jQuery制作方法。

$（文档）Ready（函数（）{）
/ /在span标签H1
$（H1）。Prepend（）；
}）；

演示打包下载