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

<h1><span></span>CSS Gradient Text</h1>
這里的關鍵點是h1 { position: relative } 和h1 span { position: absolute }
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不能正確渲染24位PNG圖片,為了顯示透明的png圖片,下面的hack是必須的。(使用HTML條件注釋的方法)在head部分的任何一個地方添加以下代碼:
<!--[if lt IE 7]><style>h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');}</style><![endif]-->
這正式我們?yōu)槭裁丛鲪篒E6的原因之一!
如果你不想在標題里面有個空的<span>標簽,你可以使用Javascript動態(tài)加入<span>標簽。使用jQuery的prepend 方法可以很容易的實現(xiàn):
<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>
想要實現(xiàn)Web 2.0的光滑文字?

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






你也可以用一個磚瓦背景圖片。看呀,這就是這就是一個斑馬圖案。——那么,隨意發(fā)揮吧!

PS:關于局限性的第一條,建議在demo頁面使用firebug調試一下,改變一下背景色,就可以看出變化了——神飛。
新聞熱點
疑難解答