CSS教程：網(wǎng)頁文本漸變

　　優(yōu)勢

　　這是純粹的css技巧，沒有使用任何ja腳本或者flash， 并且它可以在大多數(shù)瀏覽器上正常工作(IE6需要支持透明PNG的hack)這是完美的標(biāo)題設(shè)計(jì)，你不必使用photoshop，這將大量節(jié)省你的帶寬和時間。你可以對任何網(wǎng)頁字體使用這種效果，而且字號大小也是可變的。

　　他是如何工作的？

　　這個技巧很簡單。我們只是簡單的使用了1px寬的透明png覆蓋在了文本上。

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

  關(guā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; 
  }

  就這樣， 你做到了。

  使它能夠支持IE6

  下面這個hack僅僅是讓IE6支持透明PNG-24格式的圖片。 
  <!--[if lt IE 7]>
  <style>
  h1 span {
  background:none; 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’); 
  }
  </style>
  <![endif]–>

  jQuery生成版本

  如果你不想在代碼里有空的<span>標(biāo)記， 那么你可以使用javascript來動態(tài)生成它。 這里是一個簡單的jquery生產(chǎn)方法。
  <script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  //prepend span tag to H1 
  $( "h1").prepend("<span></span>");
  });
  </script>