標題是一種識別，讓瀏覽者一眼就找到他們感興趣的文章，
或宣告文章的重點，甚至吸引觀看者閱讀，礙於各種客觀因素，
能運用的字型是有限的，英文字型至少還有Arial或Helvetica，
中文字只能用一個慘字形容，大概就細明體與標楷體兩種，
這時候就得以圖片的方式來取代標題了。
但是單純的圖片標籤會失去使用標題標籤的意義所在，
所以必須使用CSS來做圖像置換的工作，在增加標題文字可看性之下，
不犧牲掉標題標籤的特點，並可讓呈現圖片速度較慢的瀏覽者，
依舊能夠看到原先的標題文字。
1.首先使用類型選擇器將H1標籤樣式化，加入圖片，並設定高度：
h1 {
height:75px;
background-image:url(../image/heading.gif);
background-repeat:no-repeat;
}
但會發現文字跑到圖片上面來了：
2.在H1樣式裡加入文字縮排屬性，讓原本的標題文字移出視窗之外：
text-indent:-9999px;
然後文字就被移出視窗之外了（驚！被藏起來了！）：
有時候網路塞車或是瀏覽者速度或其他不可抗拒之力，
圖片來不及或根本無法顯示，就只會看到一片空白：
把在第二步驟加入的那一行刪除，標題文字就又會跳回視窗裡了。
3.利用另外一塊標記來遮蓋原來的標題文字，在H1標記裡加入span標籤。
<h1>KIKCOCOPAPAYA<span></span></h1>
4.原來的 H1 類型選擇器作成的樣式，改成在h1之下包含span的後代選擇器樣式：
h1 span {
height:75px;
background-image:url(../image/heading.gif);
background-repeat:no-repeat;
}
5.再加上寬度、位置和邊緣距離設定：
h1 span{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-image:url(../image1heading.gif);
background-repeat:no-repeat;
}
完成：
範例網頁（把瀏覽器的顯示圖片關掉，可以看到底下的標題文字）
至於為什麼非得使用H1之類的標題標籤來設定，而不直接放文字圖片就好，
另外就是為了SEO(Search Engine Optimization)的關係，
搜尋引擎會將有H1標籤的關鍵字優先搜尋，增加在搜尋引擎曝光的機會，
而一些使用閱讀機來瀏覽網頁的瀏覽者，也能因為這樣減少閱讀障礙，
達到所謂的「無障礙網站設計」。
而為何不直接使用H1套用底圖，要用另外一個SPAN來遮住的原因，
如果使用H1，圖片就是H1區塊的背景，文字會出現在文字上（如上面範例所示），
另外使用一個SPAN加上絕對定位的屬性製成一個區塊來遮住，
一來文字不會出現在圖片上（因為CSS層疊原理），
文字也不會因為圖片而右移，而達到保留文字又遮住文字雙贏的效果。
留言列表
