提要：为什么要使用图片替换文字
文字的表现力差，但是便于网页获取信息，这里说的图片替换文字，是指文字还是存在于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="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/