方法A: Fahrner圖片替換(FIR)
以發(fā)現(xiàn)這個(gè)技巧的Todd Fahrner為名,FIR是用CSS的background(或background-image)屬性把文字替換成圖片的原始方法.
Douglas Bowman在2003年3月發(fā)表的極佳教學(xué)文件"Using Background-image to Replace Text" (http://www.stopdesign.com/also/articles/replace_text)使這個(gè)方法大受矚目.
讓我們通過(guò)一個(gè)簡(jiǎn)單的例子,用FIR吧標(biāo)題文字替換成圖片.
標(biāo)記源代碼
接下來(lái)要用來(lái)做替換的標(biāo)記源代碼:
<h1 id="fir">Fahrner Image Replacement</h1>
這只是個(gè)簡(jiǎn)單的標(biāo)題標(biāo)簽,里面有稍侯要用圖片替換掉的文字.你會(huì)發(fā)現(xiàn)其中為<h1>標(biāo)簽指定的唯一的id,然我們稍后能用CSS完全控制這個(gè)標(biāo)題.
圖14-1顯示了一半瀏覽器查看這段源代碼時(shí)的效果,用瀏覽器的預(yù)設(shè)值顯示標(biāo)題(在這個(gè)例子里是Verdana字體).
圖14-1 標(biāo)題的預(yù)設(shè)樣式
額外的標(biāo)簽
FIR在標(biāo)記源代碼的標(biāo)題標(biāo)簽之外還需要一組額外的標(biāo)簽包圍文字.可以使用任何想要用的標(biāo)簽,但是<span>標(biāo)簽的通用性質(zhì)使它成為完成工作的最佳工具.不加上樣式的時(shí)候,<span>對(duì)顯示效果將不會(huì)有任何影響.
經(jīng)過(guò)修改的標(biāo)記源代碼現(xiàn)在看起來(lái)變成這樣:
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
現(xiàn)在我們放好了額外的<span>標(biāo)簽,準(zhǔn)備加上CSS.
CSS內(nèi)容
方法A的精華是以所擁有的兩組標(biāo)簽分別完成兩份工作,接著將以<span>標(biāo)簽隱藏文字,再為<h1>標(biāo)簽加上樣式,指定背景圖片,正是因?yàn)檫@兩個(gè)步驟,所以會(huì)用到兩組標(biāo)簽.
隱藏文字
首先,讓用<span>標(biāo)簽的display屬性把文字隱藏起來(lái).
#fir span { display: none; }
這會(huì)把這個(gè)標(biāo)題里的<span>標(biāo)簽里的文字完全隱藏起來(lái),瀏覽器什么都不會(huì)顯示,這是第一步,完全擺脫文字,不需要放上截圖了,你大概能想象,結(jié)果會(huì)是一片空白.
指定背景
先以Photoshop制作一個(gè)文字圖片(圖14-2),當(dāng)然可以使用其他的圖片編輯器完成相同的工作.留意圖片的長(zhǎng)寬,因?yàn)樯院缶蜁?huì)用上.
圖14-2 fir.gif,用來(lái)替換掉文字的圖片
圖14-2這張圖片的大小是287像素寬,29像素高,我們將把圖片圖圖片的大小設(shè)定成<h1>標(biāo)簽的背景圖片.
#fir { width: 287px; height: 29px; background: url(fir.gif) no-repeat; } #fir span { display: none; }
先前在<span>標(biāo)簽上用display屬性隱藏的文字內(nèi)容,這邊則使用background屬性指定替換圖片的長(zhǎng)寬以及圖片名稱.
在<h1>標(biāo)簽上開了一扇"窗",大小與圖片完全相同(287*29px),而圖片則會(huì)在先前用display隱藏起來(lái)的文字后面顯示出來(lái).
圖14-3是瀏覽器查看標(biāo)題的效果,成果只有看到漂亮的圖片.完美!
圖14-3 Fahrner圖片替換法的效果
優(yōu)點(diǎn)
由于使用了CSS而不是標(biāo)記語(yǔ)法提供圖片,因此可以確定不支持CSS的瀏覽器能顯示標(biāo)題文字,需要替換圖片只需要修改一個(gè)CSS就可以了,而不必去修改表及源代碼.
但是這些優(yōu)點(diǎn)也伴隨著幾個(gè)非常重要的缺點(diǎn)而來(lái),值得一提.
缺點(diǎn)
易用性專家Joe Clark廣泛的研究了Fahrner圖片替換法對(duì)使用屏幕閱讀器或其他輔助設(shè)備閱讀頁(yè)面內(nèi)容的使用者有何影響.
他測(cè)試的結(jié)果能在他的文章 "Facts and Opinion About Fahrner Image Replacement"(http://www.alistapart.com/articles/fir/)看到.在這篇文章中,他發(fā)現(xiàn)大多數(shù)屏幕閱讀器(或許錯(cuò)誤的)遵守了這個(gè)聲明:
#fir span { display: none; }
不僅視覺(jué)上隱藏了文字,這些規(guī)則還會(huì)是那些通過(guò)屏幕閱讀器瀏覽的人完全聽不到標(biāo)題內(nèi)容.某些人會(huì)爭(zhēng)論display屬性只應(yīng)該被具有屏幕的設(shè)備解析.同時(shí)應(yīng)該特別為屏幕閱讀器建立新的CSS媒體類型,以便設(shè)計(jì)者能夠更精確的控制系統(tǒng)如何展現(xiàn)未來(lái)的圖片替換技巧.或者是屏幕閱讀器應(yīng)該遵守現(xiàn)存的媒體類型之一,像是aural.
除了屏幕閱讀器遇上文字顯示問(wèn)題,FIR還有兩個(gè)缺點(diǎn):
-
這個(gè)方法需要一組不具備任何語(yǔ)義的<span>標(biāo)簽才能運(yùn)作.
-
在使用者關(guān)閉瀏覽器顯示圖片,但又啟用CSS支持的極少數(shù)情況下(通常是為了節(jié)省帶寬),文字和圖片都不會(huì)顯示出來(lái).
衡量?jī)?yōu)缺點(diǎn)
事實(shí)是使用FIR,設(shè)計(jì)者會(huì)冒著無(wú)法對(duì)殘疾人士提供完整內(nèi)容的風(fēng)險(xiǎn),同時(shí)對(duì)關(guān)閉圖片顯示,啟用CSS的使用者也冒著相同的風(fēng)險(xiǎn).這里必須衡量?jī)?yōu)缺點(diǎn),了解缺點(diǎn),小心使用.
有些情況使用FIR很有道理,在本章后面的"技巧延伸"單元,我會(huì)分析兩種這類情況.
由于這些易用性研究成果浮上臺(tái)面,因此其他設(shè)計(jì)師開發(fā)者不斷調(diào)整,嘗試圖片替換技巧,尋找新的方法"隱藏"一般文字,并且為北京制訂圖片,接著看看以下幾種方法.
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——圖片替換 [1] 下一頁(yè) 標(biāo)記語(yǔ)言——圖片替換 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|