CSS 網(wǎng)頁(yè)文字漸變效果

發(fā)布時(shí)間：2009-08-03 00:35:52 作者：佚名

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

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

好處

這是一個(gè)純CSS技巧，無(wú)需JS或Flash。它兼容主流瀏覽器包括IE6 (需要使用PNG hack)。
它對(duì)于設(shè)計(jì)標(biāo)題是很完美的。你無(wú)需使用Photoshop制作每一個(gè)標(biāo)題。這也顯然能夠節(jié)省你的時(shí)間和帶寬。
你當(dāng)然可以是用任何網(wǎng)絡(luò)字體和字體型號(hào)。

它是如何工作的?

這個(gè)小技巧很簡(jiǎn)單。基本上我們只是在文字上面添加了一個(gè)1px的漸變PNG圖片(使用alpha透明)

screenshot

HTML代碼

<h1><span></span>CSS Gradient Text</h1>

CSS代碼

這里的關(guān)鍵點(diǎn)是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;
}

是的，就這些，你已經(jīng)搞定了。點(diǎn)擊此處查看演示頁(yè)面。

讓它在IE6中可用

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

<!--[if lt IE 7]>
<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->

這正式我們?yōu)槭裁丛鲪篒E6的原因之一！

jQuery動(dòng)態(tài)加入版本(對(duì)語(yǔ)義愛(ài)好者有用)

如果你不想在標(biāo)題里面有個(gè)空的<span>標(biāo)簽，你可以使用Javascript動(dòng)態(tài)加入<span>標(biāo)簽。使用jQuery的prepend 方法可以很容易的實(shí)現(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>