CSS禅意花园(1)-使用图片替换文字

原始链接http://tech.idv2.com/2007/08/14/image-replacing/以及本声明。

又懒了一下，好几天没更新了。其实上周买的书到了，这几天在忙着看书，没顾得上研究技术。昨天一口气看完了《CSS禅意花园》，觉得这本书不愧CSS设计的王者称号，无论从欣赏还是学习的角度，这本书都值得一读。

当然，原书网站CSS Zen Garden也一定要去看看。

今天先来介绍一个从这本书上学到的小技巧：如何用图片替换文字。

所谓图片替换文字就是用图片代替HTML中的某个文字元素，如标题。网站设计中很常用，比如我想用图片而不是文字来显示blog标题，我可以在本应当显示<h1>的地方显示一个<img>，但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片，但<h1>内的文字必须显示，否则也会影响搜索引擎评分。可以使用下面的方法之一来通过CSS完美解决。

Fahrner图像替换(Fahrner Image Replacement, FIR)

该技巧由设计师Douglas Bowman在2003年3月首次发布。该技巧的实现方法如下：用span将要替换的文本包围起来，再通过css隐藏这个span即可。例如，HTML文本如下：

<h1 id="blogtitle"><span>idv2</span></h1>

可以通过以下的CSS实现替换：

#blogtitle { background: url(img/title.png) top left no-repeat; width: 348px; height: 25px;}#blogtitle span { display: none;}

上面这个技巧的优点在于代码简单、兼容性好，但如果浏览器设置为不显示图片却使用CSS，那么<h1>的地方就会一片空白。

实际上这个方法是一切图像替换方法的基础，随着技术的发展，更好的图像替换方法出现了。

通过height属性实现

该方法由Seamus Leahy和Stuart Langridge发现。

HTML代码：

<h1 id="blogtitle">idv2</h1>

CSS代码：

#blogtitle { padding: 25px 0 0 0; overflow: hidden; background: url(img/title.png) top left no-repeat; height: 0px !important; height /**/: 25px;}

该方法的要点是：设置height为0px并通过 !important 属性确保它不会被覆盖，同时使用padding-top属性设置实际的显示高度。

由于IE的盒模型显示bug，需要使用hack（上述的/**/部分）。这里关键的是 height /**/ 的值要和padding-top设置为相同。

这个方法可以在IE5.0及以上版本、Netscape 7、Opera 6以及以上版本、Firefox、IE5.2(Mac)、 Safari上使用。优点是不需要多余的<span>；缺点是依然没有解决浏览器禁用图像时的空白问题。

通过text-indent属性实现

该方法由Mike Rundle提出，可以说是最简单实用的方法了。

HTML代码：

<h1 id="blogtitle">idv2</h1>

CSS代码：

#blogtitle { text-indent: -5000px; background: url(img/title.png) top left no-repeat; height: 25px;}

其思路就是用负的text-indent属性将文字移动到屏幕之外。

这个方法可以在IE5.0及以上版本、Netscape 7、Opera 6以及以上版本、Firefox、IE5.2(Mac)、 Safari上使用。优点是不需要多余的<span>、CSS简单；缺点是依然没有解决浏览器禁用图像时的空白问题。

较为复杂但完美的方法

Levin Alexander提出了一个能够解决浏览器禁用图像时的空白问题的方法。就是不再将文本放在<span>内，而是从<span>中移出来，和<span>一起放在父元素中，然后将背景图像应用在这个<span>上，并用该<span>盖住文字。这样就可以解决浏览器禁用图像的问题，但缺点就是不能使用透明图像（否则被遮盖的文字会露出来），而且CSS代码也较为繁琐。

由于代码较长，在这里就不写了，有兴趣的可以去参考《CSS禅意花园》这本书。