武林網(www.49028c.com)文章簡介：本文介紹的技術很經典，也算是一篇老文章了，相信很多人也都看過，之前神飛有注意到國內有些翻譯，但是不全面，這里我就將其完整的翻譯了一下。

本文介紹的技術很經典，也算是一篇老文章了，相信很多人也都看過，之前神飛有注意到國內有些翻譯，但是不全面，這里我就將其完整的翻譯了一下。

你想制作漂亮的標題而不用將每個標題都做成圖片嗎？這里是一個簡單的CSS技巧，它將向你展示使用一個png圖片制作漸變文字的方法(純CSS、無Javascript或Flash)。而你所需要的僅僅是在標題里面的一個空<span>標簽，它使用背景圖片和position:absolute屬性將標題覆蓋。該技巧經主流瀏覽器測試：Firefox, Safari, Opera, 以及Internet Explorer 6。

這個小技巧很簡單?；旧衔覀冎皇窃谖淖稚厦嫣砑恿艘粋€1px的漸變PNG圖片(使用alpha透明)

>

這里的關鍵點是h1 { position: relative } 和h1 span { position: absolute }

h1 %/h1 span %

是的，就這些，你已經搞定了。點擊此處查看演示頁面。

因為IE6不能正確渲染24位PNG圖片，為了顯示透明的png圖片，下面的hack是必須的。(使用HTML條件注釋的方法)在head部分的任何一個地方添加以下代碼：

這正式我們為什么憎惡IE6的原因之一！

如果你不想在標題里面有個空的<span>標簽，你可以使用Javascript動態加入<span>標簽。使用jQuery的prepend 方法可以很容易的實現：

<script type="text/javascript" src="jquery.js"></script> $  //prepend span tag to H1 $. script>

想要實現Web 2.0的光滑文字？

如此類推，你可以將此技巧用于任何固定背景色的情況(漸變色和背景色一樣)

你也可以用一個磚瓦背景圖片?？囱?，這就是這就是一個斑馬圖案。——那么，隨意發揮吧!

PS：關于局限性的第一條，建議在demo頁面使用firebug調試一下，改變一下背景色，就可以看出變化了——神飛。