下面图老师小编要跟大家分享CSS技巧:网页文字渐变效果，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！
【 tulaoshi.com - Web开发 】
本文介绍的技术很经典，也算是一篇老文章了，相信很多人也都看过，之前神飞有注意到国内有些翻译，但是不全面，这里我就将其完整的翻译了一下。
你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空标签，它使用背景图片和属性将标题覆盖。该技巧经主流浏览器测试：Firefox, Safari, Opera, 以及Internet Explorer 6。
这个小技巧很简单。基本上我们只是在文字上面添加了一个1px的渐变PNG图片(使用alpha透明)
h1span/spanCSS Gradient Text/h1CSS代码
这里的关键点是和
h1 { font: bold 330%/100% "Lucida Grande"; position: relative; color: #464646;}h1 span { background: url(gradient.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px;}是的，就这些，你已经搞定了。查看演示页面。
让它在IE6中可用因为IE6不能正确渲染24位PNG图片，为了显示透明的png图片，下面的hack是必须的。(使用HTML条件注释的方法)在head部分的任何一个地方添加以下代码：
!--[if lt IE 7]styleh1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');}/style![endif]--这正式我们为什么憎恶IE6的原因之一！
jQuery动态加入版本(对语义爱好者有用)如果你不想在标题里面有个空的标签，你可以使用Javascript动态加入标签。使用的prepend 方法可以很容易的实现：
script type="text/javascript" src="jquery.js"/script script type="text/javascript"$(document).ready(function(){ //prepend span tag to H1 $("h1").prepend("span/span"); });/script更多的例子想要实现Web 2.0的光滑文字？
如此类推，你可以将此技巧用于任何固定背景色的情况(渐变色和背景色一样)
你也可以用一个砖瓦背景图片。看呀，这就是这就是一个斑马图案。那么，随意发挥吧!
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
PS：关于局限性的第一条，建议在demo页面使用firebug调试一下，改变一下背景色，就可以看出变化了神飞。
来源:https://www.tulaoshi.com/n/20160220/1631051.html
看过《CSS技巧:网页文字渐变效果》的人还看了以下文章 更多>>
