DIY玩化學

為什麼要這樣做呢？

用CSS將文字替換成為圖片感覺像是多此一舉，那可不！

例如你可能想要在部落格標題那邊插入一張圖片，但是部落格標題是不可以輸入HTML語法的，當然也就不能輸入 < img> 來插入圖片，只能有文字而已。但利用自訂CSS的功能，可以將醜醜的文字替換成為美美的圖片，就像小正正教室部落格左上角那個可愛的大頭一樣。如何？是不是很想知道怎麼做啊？稍後就會教你。

除此之外，這類用CSS替換上去的圖片是屬於CSS的功能，如果瀏覽器不支援CSS，或者將CSS關閉時，仍舊可以看到正常的文字。這對於無障礙網頁來說是非常重要的！因為螢幕閱讀軟體無法將圖片的意思 "念" 出來，但卻可以將網頁中的文字正確念出。因此這些用CSS替換上去的圖並不會影響到正常網頁的瀏覽，也能符合無障礙網頁的需求。

再繼續想想，如果文章中東插一張圖、西插一張圖，隨便亂插都是圖，而且這些圖可能只是用來美化網頁用的小圖示或照片，並不具有任何意義（例如在討論貓咪的網站放了一張 Keroro 的圖片，只是因為站長很喜歡 Keroro）。這些修飾性的圖的確會讓網站看起來比較漂亮，但東一個 < img> 西一個 < img> 插入在文章中，很可能會破壞掉 HTML 檔案的結構性，沒錯！就是結構性！修飾性的圖片有或沒有都沒關係，只是稍微醜了一點，但破壞了檔案的結構性，整份檔案可能就不成 "人" 形了。尤其是對於 Web 2.0 來說，具有語意和結構的標籤檔案（LSM）是十分重要的，以後有機會在慢慢來聊這個。

基於以上這三個理由，利用CSS將文字替換為修飾性的圖片，而不要直接插入 < img> ，這是有必要的！

動動手來修改部落格標題

1. 首先你想要替換掉的文字必須用某個 HTML 標籤括起來，例如 < div>、< span>、< a>、< h1> 都可以。例如部落格標題的那段 HTML 原始碼為：

< a href="http://tw.myblog.yahoo.com/class2u-com/">< h1>小正正教室< /h1>< /a> 

2. 找出能夠代表這段文字的CSS選擇器（selector），以部落格標題為例就是 #yblogtitle h1。

3. 對這段文字加入背景圖的CSS樣式定義，並且指定寬度和高度，至少要跟背景圖一樣大，不然背景圖可能無法完全顯示出來，會被切掉。若所在的標籤不是區塊元素（例如 div），最好再加上 display:block 和 float:left 樣式，所指定的高度才會有效果。

#yblogtitle h1 {
    display:block;
    float:left;
    background:url(http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;
    width:136px;
    height:126px;
}

這時圖片就會出現了！但原本的文字還在，和圖片重疊在一起有點奇怪，讓我們繼續把文字消失。

4. 針對剛剛的部落格標題再加上這些樣式，文字就會不見了！因為我們將它變成 0 的大小，又將它縮排 -5000px 排到很遠很遠的地方去。再加上 overflow:hidden，超出區塊範圍以外的東西就看不見了：

font-size:0;
line-height:0;
text-indent:-5000px;
overflow:hidden;

5. 效果還不錯吧？如果原本的文字是超連結，你可能會希望圖片也能夠超連結，滑鼠滑過去會變為手指。那麼就再加上：

cursor:pointer;
cursor:hand;

將文字替換成為圖片，完整的CSS語法為：

#yblogtitle h1 {
    display:block;
    float:left;
    background:url(http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;
    width:136px;
    height:126px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
}

將這段語法貼在 Yahoo! 部落格的自訂CSS的地方，將圖片檔案路徑更換為你自己的圖片，就可以將部落格標題換成美美的圖片囉！相同的技巧，也可以用在其他很多地方哦～

建議修改css語法前請先"備份"以免語法跑掉或亂掉之前心血就泡湯了!