|
今天我们主要来讨论如何用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设置为块元素，图片是此元素的背景。
在悬停状态，不仅可以设置文字的效果，还可以设置背景图片是不是变化。
我们首先准备一张背景图片：
我们看下面的效果：
<!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.xjcncn.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() no-repeat 0 -30px;
}
</style>
</head>
<body>
<a href="http://www.xjcncn.com/">xjcncn.Com</a>
</body>
</html>
关于代码的依秩序说明如下：
* {……}
整体布局声明，12px的文字大小，并居中对齐；
a {……}
将A元素设置为块元素，宽度与高度分别定义为100px、30px；
设置文字颜色，设置行高为30px，实现文字在A区域内垂直居中对齐。
设置文字的装饰线为无，即去掉了链接的下划线。
背景的设置，指定图片所在URL，设置背景图片不重复，定位在0 0的位置。
a:hover {……}
设置文字颜色，背景图片除了Y方向的坐标改为-30px其它与上面一样。
链接的背景图片为100*60px，在链接状态，显示上半部分，即坐标为0 0。在鼠标悬停状态，我们希望看到的是图片的下半部分，所以坐标为0 -30px。
作者：佚名 | 文章来源：本站原创 | 更新时间：2007-8-30 22:05:20
|
上一篇文章： javascript在ie和firefox下的运行结果的差别
下一篇文章： 图片缩略图，点击放大到原图大小的代码 |
相关文章：
没有相关文章 |
MSN :xjcncn@hotmail.com
; 
QQ：359312
;地址：新疆乌鲁木齐市友好E时代公寓B座708 邮编：830000
 no-repeat 0 0;<BR>}<BR>a:hover {<BR> color:#000;<BR> background:url(<A href=){kind=link}