css图片替换

图片替换主要是将文字替换成图片的技术，即在html中使用文字，浏览器显示的时候用对应的图片显示，意义在于便于做网站优化（SEO），文字才是搜索引擎寻找的主要对象

1、Fahrner图片替换法（FIR）

首先添加一个span标签，在span里写文字描述，然后用display：none隐藏起来，在span的上级标签中添加背景图片。
优点：使用css而不是标记语法提供图片，更改图片只需要更改css
缺点：1）需要一组不具备任何语义的span标签2）display属性影响屏幕阅读器使用者3）关闭浏览器显示图片，同时启用css支持时，文字图片均不可显示。

Image Replacement
 
h1{ background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; }
span { display: none; }

2、text-dent属性，给其设置一个较大的赋值，达到隐藏文本的效果

w3cplus
 
.technique-three {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

3、使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值

w3cplus
 
.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”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果

    w3cplus

 
.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标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果

  w3cplus

 
.technique-eight {
  width: 329px;
  height: 79px;
  position: relative;
}
.technique-eight span {
  background: url(images/w3cplus-logo.png);
  position: absolute;
  width: 100%;
  height: 100%;
}

6、设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来

w3cplus
 
.technique-nine {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  font-size: 1px;
  color: white;
}

7、使用css的clip属性来实现图片替换文本的效果

w3cplus
 
.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;
}

参考博客