注:本文由 Robin 翻譯自 webdesignerwall?(這個標題不知道該怎么翻譯好, 希望大家能提提意見.)

你是否想不用photoshop來創建一個帶漸變的標題文字嗎? 這里用一個簡單的css技巧來向你展示如何僅僅使用css和png圖片來制造這種效果. 經測試這種方法適合大多數主流瀏覽器.當然, IE6需要一個支持透明PNG的Hack(值得慶幸的是微軟正在極力的將用戶的IE6自動升級到IE7, 延伸閱讀: Warning: An IE7 Auto-Update Is Coming Soon?)

優勢

這是純粹的css技巧,沒有使用任何ja腳本或者flash, 并且它可以在大多數瀏覽器上正常工作(IE6需要支持透明PNG的hack)

這是完美的標題設計,你不必使用photoshop,這將大量節省你的帶寬和時間.

你可以對任何網頁字體使用這種效果,而且字號大小也是可變的.

他是如何工作的?

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

html

CSS Gradient Text

CSS

關鍵就在這里:

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格式的圖片.

總結

以上是生活随笔為你收集整理的html渐变效果做网页,CSS实现文本渐变效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。