CSS基礎(chǔ)實(shí)例：CSS實(shí)現(xiàn)帶背景圖片的文字鏈接的方法_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

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

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

示例代碼 [m.hl5o.cn]

　　我想做成第一種圖片的效果。可是按我自己的代碼寫下來就成了第二種效果，字有多大背景就是多大，不會完全顯示出來。暈。
　　有什么辦法解決么。
　　a{text-decoration:none;}
　　a.left:link{color:#353535;}
　　a.left:visited{color:#353535;font-size: 11pt;font-weight: bolder;
　　text-align:center;background-image: url(images/0014.gif);}
　　a.left:hover,a:active,a:focus{color:#353535;}

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

我們看下面的效果：

代碼調(diào)試框 [m.hl5o.cn]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

關(guān)于代碼的依秩序說明如下：
　　* {……}
　　整體布局聲明，12px的文字大小，并居中對齊；
　　a {……}
　　將A元素設(shè)置為塊元素，寬度與高度分別定義為100px、30px；
　　設(shè)置文字顏色，設(shè)置行高為30px，實(shí)現(xiàn)文字在A區(qū)域內(nèi)垂直居中對齊。
　　設(shè)置文字的裝飾線為無，即去掉了鏈接的下劃線。
　　背景的設(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。
　　