在這個(gè)示例中，我選用大小為42×42px的圖，它有336px的偏移（譯注：是指左偏移）并緊貼著頂部。這樣便形成了相應(yīng)的CSS：

a.stammy, a.stammy:hover{      background:#fff url(path/to/sprites.png) -336px 0 no-repeat;      display:block;      height:42px;      width:42px;      text-indent:-9999px;      overflow:hidden; }

    CSS選擇器對(duì)所有含 class="stammy" 屬性的鏈接都有效。背景屬性載入精靈圖片，然后設(shè)置背景圖位置為負(fù)值（其必為負(fù)）。如果圖片離頂部有10個(gè)像素，那背景位置應(yīng)該是“-336px -10px”。之后在CSS中設(shè)置了寬和高。我對(duì)懸停偽類（hover pseudoclass）也進(jìn)行了設(shè)置，因?yàn)橛幸淮萎?dāng)我懸停在該類的鏈接上時(shí)，會(huì)改變鏈接的懸停狀態(tài)的顏色，從而背景圖會(huì)消失。

    設(shè)置溢出隱藏“解決當(dāng)你選擇要替換的文本的時(shí)候，那高亮部分會(huì)一直延伸到屏幕左側(cè)的煩人問題”，正如Rob所說。對(duì)其他所有圖片如法炮制，并對(duì)每個(gè)選擇器命名。

    編寫XHTML代碼

    目今你已經(jīng)對(duì)每個(gè)圖片有一些CSS選擇器。至此你已經(jīng)搞定了大問題，還差最后一步?，F(xiàn)在只需對(duì)每個(gè)選擇器創(chuàng)建鏈接。

<a class="stammy" title="Paul Stamatiou">Paul Stamatiou</a>

    相當(dāng)簡單吧？用CSS和鏈接設(shè)置類，將精靈的信息組合起來，只顯示精靈的一部分。雖此，因?yàn)槲覀兩踔翛]使用一個(gè)img標(biāo)簽，我們不能設(shè)置alt屬性，而這對(duì)移動(dòng)用戶、搜索引擎、屏幕閱讀器之類的來說至關(guān)重要。將文字寫在鏈接中，再用CSS文本縮進(jìn)將其移出屏幕范圍，這樣你就無需吧文字疊在圖片上而同樣具有可用性。

本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://m.absorbed3d.com/