遵循Web標(biāo)準(zhǔn)的思想，網(wǎng)頁要表現(xiàn)出一種親和力。那么，針對(duì)殘障用戶來說，其“閱讀”器可不能讀取圖像上傳遞的信息的。
所以我們會(huì)采用一種Using Background-Image to Replace Text的方法，也就是將圖像以背景圖像的方式“插.入”網(wǎng)頁顯示，同時(shí)為了讓殘障人士能了解該部分信息，顯示該圖像的區(qū)域用文本加以說明；但又為了讓正常人不為既看到背景圖像又看到圖像上的文本而混淆，所以我們又將這些文本隱藏。
或許我們也會(huì)說我們可以給圖像加alt、加title，這樣正常用戶能看得見，殘障用戶也“閱讀”到。不過，我們?cè)傧胂?，Web標(biāo)準(zhǔn)還推薦使用合理的XHTML文檔結(jié)構(gòu)，對(duì)于插.入圖像這樣一個(gè)“實(shí)體”，插.入到網(wǎng)頁是什么圖像就是什么圖像了，當(dāng)我們需要替換圖像時(shí)，我們修改HTML文件，若有很多頁面呢（我批量改_-!）。所以這部分圖像的插.入就“親和力”和“擴(kuò)展性”而言，都建議使用“背景圖像” “隱藏文本”的方法。當(dāng)然對(duì)于圖像熱區(qū)鏈接我們另做討論。
說的都不大理解，還是舉例子。
有這樣的一張圖像，我們要插.入到網(wǎng)頁顯示，那么正常情況下我是使用“<img />”標(biāo)簽的
<img src="http://chabaoo.cn/images/logo.gif" atl="hello,world" />
[Ctrl A 全部選擇進(jìn)行拷貝 提示：可先修改部分代碼，再點(diǎn)擊運(yùn)行]
其中，因?yàn)闉g覽器可能顯示不了圖像中文本的字體樣式，所以我們做成圖像顯示在網(wǎng)頁中。在當(dāng)我們需要為這種圖像中的文本新做另外一種字體的圖像，那么現(xiàn)在來解決新圖像的顯示，我們就必須要修改HTML文檔。而一旦我采用了CSS定義背景圖像之后，這些問題都迎刃而解。
<style type="text/css"> h1 { height:35px; background-image:url("/images/logo.gif"); background-repeat:no-repeat; } h1 span {display:none;} </style> <h1><span>Hello world!</span></h1>
[Ctrl A 全部選擇進(jìn)行拷貝 提示：可先修改部分代碼，再點(diǎn)擊運(yùn)行]
所以，我們開始感受到這種方式的“好”，并以此應(yīng)用到新的網(wǎng)頁設(shè)計(jì)中去。當(dāng)然，為了盡量精簡(jiǎn)我們的HTML代碼，我還可以這樣：
<style type="text/css"> h1 { height:35px; background-image:url("/images/logo.gif"); background-repeat:no-repeat; text-indent: -10000px; } </style> <h1>Hello world!</h1>
[Ctrl A 全部選擇進(jìn)行拷貝 提示：可先修改部分代碼，再點(diǎn)擊運(yùn)行]
直接定義 text-indent: -10000px; 將文本顯示在屏幕分辨率以外的區(qū)域。
=======================================
今天向老友問了個(gè)問題，“關(guān)于一個(gè)效果……圖像是用<div>包含一下呢還是直接<img /> ”。
隨即否定：不要為了表現(xiàn)添加標(biāo)簽，也不要為表現(xiàn)用IMG插.入圖片，表現(xiàn)的內(nèi)容，不放到CSS里去，怎么談分離。
頁面全部完成后，把CSS去掉，看看頁面，應(yīng)該是很純的，全是內(nèi)容，沒有一點(diǎn)兒表現(xiàn)的成份在里面。
于是如醍醐灌頂，恍然大悟，遂搜索整理并理解得此文。

最新評(píng)論