使用text-indent实现图片Logo代替文字Logo

一个网站，logo是肯定少不了的。最常用的就是图片logo或直接打几个字当作logo。

毫无疑问，图片logo远比文字好看，图片可以色彩缤纷变幻无穷，而文字变来变去都那样。但直接用文字logo的还是有很多，因为纯文字更利于搜索引擎识别，图片就不行了。

有没有两全其美的方法呢？有的人使用这种：

<a href="#"><img src="/logo.png" title="图片说明" alt="图片说明"/></a>

搜索引擎无法看到图片，但可以看到图片说明，这样也就相当于文字了————这也是SEO中强调要给图片加上alt的原因。

但其实这种方法并不完美，很多人都不喜欢加alt标记，而且这样对搜索引擎到底有没有妨害也难说清。下面介绍一种国际国内通用的方法.

html代码，非常简单：

<a href="#" class="logo">这是logo</a>

.logo{background:url(images/logo.png) no-repeat;/*把你的logo图片设成背景图*/
height:60px; width:150px; /*设置宽高*/
text-indent:-9999px; /*设置文字缩进*/
}

CSS代码最关键的一步就是最后的text-indent，text-indent的意思是文字缩进，它的单位一般是正数，用来将段落前空格。但这里把它的单位设为了负值，-9999px，于是原本在A标签里面的文字就被缩到不知道哪儿去了。

这样一来，用户看到的就是图片logo（背景图），而搜索引擎看到的却是正宗的文字，一举两得。

举一反三，这种方法可以用来制作图片导航栏和标题栏，但我不推荐哈，因为这两者需要做的图片太多了，麻烦，而且修改起来更麻烦。