提要：为什么要使用图片替换文字

      文字的表现力差，但是便于网页获取信息，这里说的图片替换文字，是指文字还是存在于dom树中，但是显示的时候用图片来显示。

会遇到得问题： css on/images off

      我的理解：当图片没有加载到，页面会什么都不显示

替换方法：

1.原始的方法：使用span元素，设置display为none

  代码：

       <h3 id="header1">

<span>image replacement</span>

   </h3>

       /*css*/

       #header1{

width: 100%;

height: 100%;

background: url(2.png) no-repeat;

   }

   #header1 span{

 display: none;

   }

  注意：该方法必须要设置宽高，因为当设置了span元素为none时，h3就不包含元素了，因此不能设置背景。

        并且该方法没有解决image off/css on的问题。

  存在的问题：

      如果文字是一个链接文字，文字被替换后，链接也会消失。

      解决方法：在<a>标签中包含一个额外的span元素，设置他为none，并强制把a标签的display设为block，并定义a的宽高。

2.额外增加一个img元素

  代码：

      <h3 id="header2">

<img src="http://www.mamicode.com/2.png"/>

<span>image replacement</span>

  </h3>

      /*css*/

      #header2 span{

display: none;

  }

   注意：该方法在页面中增加了多余的没有语义的元素

3.使用边缘定位（margin position）隐藏文本

  代码：

        <h3 id="header3">

image replacement

</h3>

        /*css*/

        #header3{

background: url(2.png) no-repeat top right;

width: 2100px;

margin: 0 0 0 -2000px;

    }

  注意：必须设置宽度，且宽度要大于负边距的绝对值。这样内容才不会被完全隐藏掉。

        该方法没有解决image off/css on的问题

4.使用padding结合overflow：hidden

  代码：

        <h3 id="header4">

image replacement

</h3>

        /*css*/

        #header4{

overflow: hidden;

padding: 60px 0 0 0;

height: 0px !important;

height: 60px;/*兼容IE5*/

background: url(2.png) no-repeat;

    }

  注意：该方法没有解决image off/css on的问题

5.使用text-indent来隐藏文本

  代码：

        <h3 id="header5">

image replacement

</h3>

        /*css*/

        #header5{

/*overflow: hidden;*/

/*text-indent: -5000px;*/

text-indent: -100em;

background: url(2.png) no-repeat;

    }

  注意：可以设置text-indent为负的em也可以为负的px；

        该方法没有解决image off/css on的问题

6.原始方法的变形：设置span元素的宽高为0

  代码：

       <h3 id="header6">

<span>image replacement</span>

</h3>

       /*css*/

       #header6{

background: url(2.png) no-repeat;

   }

   #header6 span{

display: block;

width: 0;

height: 0;

overflow: hidden;

   }

  注意：该方法必须要设置span的overflow为hidden；

        该方法没有解决image off/css on的问题

7.使用content替换内容

  代码：

       <h3 id="header7">

image replacement

</h3>

       #header7{

 width: auto;

 height: auto;

 content: url(2.png);

    }

  注意：该方法替换后文字后，不能对图片进行重复或平铺，或是使用image sprite

8.将文字大小设为1px；且文字颜色设为和背景一样。

代码演示：http://benlai.sinaapp.com/code/image_replace_text.html

原文网址：http://www.mezzoblue.com/tests/revised-image-replacement/

图片替换文字