其实这算一个老问题了。利用PNG图片的透明属性和CSS滤镜可以轻松制作渐变的文字效果。但由于IE6对AlphaImageLoader滤镜的不支持，使得这种方式并不完美。

前两天看到CSSGLOBE上的这篇《Css Text Gradient》，已经能很好的适用于IE6，7及FF的方案。
关键归结与以下两点：
一、PNG自身可透明的属性。
需要注意的是：在保存PNG图片的时候，一定要注意保证背景是透明的。
二、CSS滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader的使用。
示例地址：http://5key.net/demo/css-gradient-text/
示例下载

代码：

h1 {
color:#333;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-.05em;
position:relative;
}
h2 {
color:#0033FF;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-.05em;
position:relative;
}h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:400px;
background:url(gradient.png) repeat-x;
}
h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:400px;
background:url(gradient.png) repeat-x;
}
* html h1 span, {
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
}
* html h2 span, {
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
}

相关文章

• BlueTripCss (0)
• Unit PNG Fix解决IE6下PNG兼容问题 (5)
• 良好的代码注释 (9)
• 自适应的标题 (18)
• 关于《CSS权威指南 第三版》 (10)
• CSS切换图片效果 (9)

标签： css, PNG

这篇文章发布于 2008年01月18日，Friday，12:41，归类于 web开发。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。