不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过 CSS 来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。因此，深受网页设计师的喜爱，本文介绍了几种常见的图文替换技术。
Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：
HTML 代码：
<h2> <span>Hello World</span> </h2>
CSS 代码：
<style type="text/css"> h2 { background:url(hello_world.gif) no-repeat; 150px; height: 35px; } span { display: none; } </style>
代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。
Phark 的方法
这种技术是由 Mike Rundle 提出的，好处是不需要额外的标签：
HTML 代码：
<h2> Hello World </h2>
CSS 代码：
<style type="text/css"> h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; 150px; height:35px; } </style>
代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。
通常偏移掉字体的方式是使用text-indent:-9999px;可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体,所以问题就来了text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过
而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过
PS:text-indent的做法如果目标是个button IE6下 按钮会不见，除非block或者float
Gilder/Levin 的方法
这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的，这也许是一个最完善的图文替换技术了：
HTML 代码：
<h2> <span></span>Hello World </h2>
CSS 代码：
<style type="text/css"> h2 { 150px; height: 35px; position: relative; } h2 span { background: url(hello_world.gif) no-repeat; position: absolute; 100%; height: 100%; } </style>
首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。