只用CSS做出渐变字体的效果.pdfVIP

只⽤CSS做出渐变字体的效果 这种利用CSS技术来制作出渐变或特殊的文字效果并不少见，好处就是 以在一 些大标题中为字体添加渐变效果，而不需要每次都用图片替代，比如本文的最后这些 案例。 你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技 巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或 Flash)。而你所需要的仅仅是在标题里面的一个空span标签，它使用背景图片和 position:absolute属性将标题覆盖。该技巧经主流浏览器测试：Firefox, Safari, Opera, 以及Internet Explorer 6。 查看演示 | 下载演示文件打包 好处 这是一个纯CSS技巧，无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。 它对于设计标题是很完美的。你无需使用Photoshop制作每一个标题。这也显然能够 节省你的时间和带宽。 你当然 以是用任何网络字体和字体型号。 它是如何工作的? 这个小技巧很简单。基本上我们只是在文字上面添加了一个1px的渐变PNG图片 (使用alpha透明) HTML代码 h1span/spanCSS Gradient Text/h1 CSS代码 这里的关键点是h 1 { position: relative } 和h 1 span { position: absolute } h1 { font: bold 330%/100% L cida Grande; position: relative; color: #464646;}h1 span { backgro nd: rl(gradient.png) repeat-x; position: absol te; display : block; width: 100% ; height: 31px;} 是的，就这些，你已经搞定了。点击此处查看演示页面。 让它在IE6中 用 因为IE6不能正确渲染24位PNG图片，为了显示透明的png图片，下面的hack是必 须的。(使用HTML条件注释的方法)在head部分的任何一个地方添加以下代码： !--[if lt IE 7]styleh1 span { backgro nd: none; filter: prog 这正式我们为什么憎恶IE6的原因之一！ jQuery动态加入版本(对语义爱好者有用) 如果你不想在标题里面有个空的span标签，你 以使用Javascript动态加 入span标签。使用jQuery的prepend 方法 以很容易的实现： script type=text/javascript src=jq ery .js/script script type=text/javascript$(doc ment).ready(f nction(){ / $(h1).prepend(span/span); });/script 更多的例子 想要实现Web 2.0的光滑文字？ 如此类推，你 以将此技巧用于任何固定背景色的情况(渐变色和背景色一样) 图案/纹理 你也 以用一个砖瓦背景图片。看呀，这就是这就是一个斑马图案。——那么， 随意发挥吧! 局限性… 这个技巧只适⽤于固定背景⾊的元素。你的渐变⾊(PNG 图⽚) 必须与背景⾊是 同⼀个颜⾊。 如果你 兼容IE6 ，就需要使⽤IE6的PNG hack(⽐如滤镜或 S⽅法) 如果你的渐变图⽚⽐标题要⾼，那么这个⽂字将是不能被选择的。 W3Cschool （）最⼤的技术知识分享与学习平台 此篇内容来 于⽹站⽤户上传并发布。