CSS基礎實例：CSS實現帶背景圖片的文字鏈接的方法_DIV+CSS實例

　　在論壇閑逛，碰到一個朋友提出了一個關于“CSS實現帶背景圖片的文字鏈接”的問題。

經典論壇貼子原文如下：


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

我們看下面的效果：


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