用 CSS 实现图片替换文字

摘要: 不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。

于是，出现了通过 CSS 来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。因此，深受网页设计师的喜爱。

不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。

于是，出现了通过 CSS 来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。因此，深受网页设计师的喜爱，本文介绍了几种常见的图文替换技术。

• Fahrner Image Replacement (FIR)
• Phark 的方法
• Gilder/Levin 的方法 (推荐)
  

Fahrner Image Replacement (FIR)

这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：

HTML 代码：
HTML:   

2. <h2>
3. <span>Hello World </span>
4. </h2>
5.  

CSS 代码
CSS:

1.  
2. <style type= "text/css">
3. h2 {
4. background: url (hello_world.gif ) no-repeat;
5. width: 150px;
6. height: 35px;
7. }
8. span {
9. display: none;
10. }
11. </style>
12.  

代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

Phark 的方法

这种技术是由 Mike Rundle 提出的，好处是不需要额外的标签：

HTML 代码： HTML:

1.  
2. <h2>
3. Hello World
4. </h2>
5.  

CSS 代码
CSS:

1.  
2. <style type= "text/css">
3. h2 {
4. text-indent: -5000px;
5. background: url (hello_world.gif ) no-repeat;
6. width: 150px;
7. height:35px;
8. }
9. </style>
10.  

代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。

Gilder/Levin 的方法

这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的，这也许是一个最完善的图文替换技术了： HTML 代码： HTML:

1.  
2. <h2>
3. <span> </span>Hello World
4. </h2>
5.  

CSS 代码
CSS:

1.  
2. <style type= "text/css">
3. h2 {
4. width: 150px;
5. height: 35px;
6. position: relative;
7. }
8. h2 span {
9. background: url (hello_world.gif ) no-repeat;
10. position: absolute;
11. width: 100%;
12. height: 100%;
13. }
14. </style>
15.  

首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。

转载于:https://www.cnblogs.com/jcdmt/archive/2008/07/05/1236342.html