图片替换主要是将文字替换成图片的技术，即在html中使用文字，浏览器显示的时候用对应的图片显示，意义在于便于做网站优化（SEO），文字才是搜索引擎寻找的主要对象
1、Fahrner图片替换法（FIR）
首先添加一个span标签，在span里写文字描述，然后用display：none隐藏起来，在span的上级标签中添加背景图片。
优点：使用css而不是标记语法提供图片，更改图片只需要更改css
缺点：1）需要一组不具备任何语义的span标签2）display属性影响屏幕阅读器使用者3）关闭浏览器显示图片，同时启用css支持时，文字图片均不可显示。
<h1><span>Image Replacement</span></h1>
h1{ background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; }
span { display: none; }
2、text-dent属性，给其设置一个较大的赋值，达到隐藏文本的效果
<h1 class="technique-three">w3cplus</h1>
.technique-three {
width: 329px;
height: 79px;
background: url(images/w3cplus-logo.png);
text-indent: -9999px;
}
3、使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值
<h1 class="technique-six">w3cplus</h1>
.technique-six {
width: 329px;
padding: 79px 0 0 0;
height: 0px;
font-size: 0;
background: url(images/w3cplus-logo.png);
overflow: hidden;
}
4、通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果
<h1 class="technique-seven">
<span>w3cplus</span>
</h1>
.technique-seven {
width: 329px;
height: 79px;
background: url(images/w3cplus-logo.png);
}
.technique-seven span {
display: block;
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
5、利用一个空白的span标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果
<h1 class="technique-eight">
<span></span>w3cplus
</h1>
.technique-eight {
width: 329px;
height: 79px;
position: relative;
}
.technique-eight span {
background: url(images/w3cplus-logo.png);
position: absolute;
width: 100%;
height: 100%;
}
6、设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来
<h1 class="technique-nine">w3cplus</h1>
.technique-nine {
width: 329px;
height: 79px;
background: url(images/w3cplus-logo.png);
font-size: 1px;
color: white;
}
7、使用css的clip属性来实现图片替换文本的效果
<h1 class="technique-ten"><span>w3cplus</span></h1>
.technique-ten {
width: 329px;
height: 79px;
background: url(images/w3cplus-logo.png);
}
.technique-ten span {
border: 0 !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
height: 1px !important;
margin: -1px;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
width: 1px;
}
