CSS 实现logo图像链接替换文本链接

现在的网页设计一般用logo图片代码纯文本链接,而大部分网页设计师是直接在网页相关位置使用(<img src="images/logo.gif">)实现的,其实更好的方法是直接使用CSS设置其背景图片,然后再对a标签进行样式定义,这样即利于搜索引擎辨别,也利于以后的变动修改。

如何利于CSS实现logo图片链接替换纯文本链接:

原html代码如下:

<div id="logo">
	<a href="http://neirong.org" title="资源共享"><img src="images/logo.gif"></a>
</div>
利于CSS使以下源码实现上面代码的效果:

<div id="logo">
	<a href="http://neirong.org" title="客服笔记">客服笔记</a>
</div>
定义id=logo和a链接的属性如下:

#logo {background:url(images/logo.gif) no-repeat left top;}
#logo a {width:160px;height:90px;display:block;text-indent:-9999px;}
text-indent:-9999px;指将文本置于左侧9999px处,即文本还在但不会看见。


关键词: css