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。