Zero159

以前常常會發現在html裡面有個<span>標籤，但是一直都搞不懂他到底在做什麼。最近才發現他可是有很大的用途阿，就是可以利用來替換掉我們原本的文字。這樣的做法很好，因為如此在原本的html裡面的標題<hx>或是某段文字<p>，我們就可以利用替換為圖片的方式來增加視覺效果的設計。也完全不需要改變原本html的結構，可以由css完全的控制。這也稱為FIR(Fahrner Image Replacement)。

而作法相當的簡單，如下列就是把<h3>的文字替換為一個圖片。當然也可以利用在<div><p>等等地方都可以。依你的需要加入是當的屬性id或是class。

html: <h3><span>replace me!!<span></h3>

css: h3{

background: url(xxx.gif);

width: xxxpx;

height: xxxpx;

}

h3 span{

display: none;

}

如此就可以很簡單的替換掉了，但是也出現了一個小問題，就是當無法顯示圖片時那就什麼東西都看不到了。螢幕閱讀器無法讀取內容。但這主要還是對比較特殊的情況比較不利，但這個技術還是非常的好用。但還有其他更好但是也更複雜的方法就不再提了(Leahy/Langridge，Rundle，Levin)。

更詳細的內容可以參考stopdesign.com:Using Background-Image to Replace Text