CSS实现带背景图片的文字链接的方法

发布时间:2007-10-07 09-48-8 作者:河南新华电脑学院

在论坛闲逛，遇到一个朋友提出了一个关于“CSS实现带背景图片的文字链接”的问题。

贴子原文如下：

　　我想做成第一种图片的效果。可是按我自己的代码写下来就成了第二种效果，字有多大背景就是多大，不会完全显示出来。晕。

　　有什么办法解决么。

　　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;}

其实这个问题的主要思路是这样的：

　　将A设置为块元素，图片是此元素的背景。

　　在悬停状态，不仅可以设置文字的效果，还可以设置背景图片是不是变化。

　　我们首先准备一张背景图片： CSS实现带背景图片的文字链接的方法

我们看下面的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页教学网www.webjx.com</title> <style type="text/css"> * { font-size:12px; text-align:center; } a { display:block; width:100px; height:30px; color:#353535; line-height:30px; text-decoration:none; background:url(http://www.hn-xinhua.com/image/upload/071007094807461.png) no-repeat 0 0; } a:hover { color:#000; background:url(http://www.hn-xinhua.com/image/upload/071007094807461.png) no-repeat 0 -30px; } </style> </head> <body> <a href="http://www.webjx.com/">Webjx.Com</a> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

关于代码的依秩序说明如下：
　　* {……}
　　整体布局声明，12px的文字大小，并居中对齐；
　　a {……}
　　将A元素设置为块元素，宽度与高度分别定义为100px、30px；
　　设置文字颜色，设置行高为30px，实现文字在A区域内垂直居中对齐。
　　设置文字的装饰线为无，即去掉了链接的下划线。
　　背景的设置，指定图片所在URL，设置背景图片不重复，定位在0 0的位置。
　　a:hover {……}
　　设置文字颜色，背景图片除了Y方向的坐标改为-30px其它与上面一样。
　　链接的背景图片为100*60px，在链接状态，显示上半部分，即坐标为0 0。在鼠标悬停状态，我们希望看到的是图片的下半部分，所以坐标为0 -30px。

编辑: 点击次数: