Question

怎么使用CSS实现超链接有背景图像

.top_menu1
{
font-size:13px;
width:131px;
height:31px;
background-image: url(images/top-bg11.jpg);
text-align:center;
text-decoration:none;
}

这段代码可以实现,只是那个宽度和高度没有体现出来,超链接的字体多大背景图片就大多,没有把我要的整张背景图片显示出来,我明明有设置宽度和高度的.

.nav
{
background:url(images/top-bg11.jpg) no-repeat;
width:131px;
height:31px;
float:left;
text-valign:center;
color:#ffffff;
font-size:13px;
text-align:center;
text-decoration:none;
}
这段程序能就能把整张背景图片显示出来了,只是我没办法让超链接在背景图片中垂直居中,挺郁闷的,希望会的人能指点我一下,先谢谢了.

Answer 1

这是因为超链接默认是行内元素，用CSS设置起高度是不起作用的，需要将其强制转换成块级元素，即在超链接的样式里加上display:block;然后就可以设置高度了，不过别忘了还要设置相应的宽度，不然它会占满一行。另外如果你的超链接是水平放置的话，需要加上float属性，加上float属性后，元素直接就转换成块级元素，所以display就可以省去不写了。

Answer 2

为a标签添加一个背景就可以了

a{
	width: 20px;
	height: 18px;
	background: url(images);
	display: inline-block;
}

宽和高是必须的，因为使用背景图片是需要宽高的

Answer 3

把你的a设置属性display:inline-block;