在論壇閑逛，碰到一個(gè)朋友提出了一個(gè)關(guān)于“CSS實(shí)現(xiàn)帶背景圖片的文字鏈接”的問(wèn)題。

經(jīng)典論壇貼子原文如下：


其實(shí)這個(gè)問(wèn)題的主要思路是這樣的：
　　將A設(shè)置為塊元素，圖片是此元素的背景。
　　在懸停狀態(tài)，不僅可以設(shè)置文字的效果，還可以設(shè)置背景圖片是不是變化。
　　我們首先預(yù)備一張背景圖片：

我們看下面的效果：


關(guān)于代碼的依秩序說(shuō)明如下：
　　* {……}
　　整體布局聲明，12px的文字大小，并居中對(duì)齊；
　　a {……}
　　將A元素設(shè)置為塊元素，寬度與高度分別定義為100px、30px；
　　設(shè)置文字顏色，設(shè)置行高為30px，實(shí)現(xiàn)文字在A區(qū)域內(nèi)垂直居中對(duì)齊。
　　設(shè)置文字的裝飾線為無(wú)，即去掉了鏈接的下劃線。
　　背景的設(shè)置，指定圖片所在URL，設(shè)置背景圖片不重復(fù)，定位在0 0的位置。
　　a:hover {……}
　　設(shè)置文字顏色，背景圖片除了Y方向的坐標(biāo)改為-30px其它與上面一樣。
　　鏈接的背景圖片為100*60px，在鏈接狀態(tài)，顯示上半部分，即坐標(biāo)為0 0。在鼠標(biāo)懸停狀態(tài)，我們希望看到的是圖片的下半部分，所以坐標(biāo)為0 -30px。