用图片代替文字标题

用图片代替文字标题, 为什么要这样做呢? 在搭建网站的时候, 人们总是希望页面能吸引别人的目光, 所以常常会使用 Logo (图片标题). 但搜索引擎是机器 (人肉搜索除外), 它们只对文字描述感兴趣. 所以我们要想办法在保留文字描述的基础上只显示图片, 这样做对访客和爬虫都是友好的.

Google

接下来我们看看该怎么弄, 先看看上面的图片, 它的代码是:

<h1 style="background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; width:276px; height:110px; text-indent:-999em;">Google</h1>  

 

background-image: 背景图片
width: 图片宽度
height: 图片高度
text-indent: 这个是重点, 首行文本的缩进. 如果使用负值,那么首行会被缩进到左边. 当的负值足够大, 文字就会消失得无踪影了.

本方法已在 IE6/7, Firefox 2.0.0.13, Opera 9.23 和 Konqueror 3.5.6 实验成功.
另外, 你也可以给文档元素一个 id 或 class, 将样式写到 CSS 里面.