给背景图片加上链接(2)
九月 3, 2010
1 comment
话不多说,这是给背景图片加上链接的第二种方法,第一种方法在这里。
今天讲解给背景图片加上链接的第二种方法:a标签在需要加链接标签的里面,例:U9-WAR3专区。
CSS代码如下:
h1 {
height:60px;
width:260px;
background:url("http://war3.uuu9.com/skin/20081223/images/logo.gif") no-repeat scroll 0 0 transparent;
cursor:pointer; //指定鼠标指针显示样式
}
h1 a {
height:100%;
width:100%;
display:block; //把a标签定义为块级元素
text-indent:-9999px; //使文字移出显示器的显示范围,只保留用户能看到背景图片
}
HTML代码如下:
<h1>
<a href=”http://war3.uuu9.com”>
游久魔兽专题频道 war3.uuu9.com
</a>
</h1>
点评:与第一种方法相同的是,背景图片还是定义给了h1标签;与第一种方法不同的是,这次的a标签在h1标签的里面,就是说a标签包住的不是h1标签,而是文字。而文字不是块级元素,所以需要给a标签定义display:block属性;文字的高宽度也不能满足背景图片的高宽度,所以需要给a标签一个高和宽。
注意点:不要忘了定义a标签的高度和宽度;不要忘了给a标签定义text-indent:-9999px属性,使文字移出显示屏之外。
用文字缩进隐藏文字是最常用
[回复]