很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

方法一：

HTML Markup

			
<h1 id="technique-one">
  <a href="#">w3cplus</a>
</h1>	

CSS Code:

#technique-one {
  width: 329px;
  height: 79px;
  background-image: url(images/w3cplus-logo.png);
}
#technique-one a {
  display: none;
}

这种方法被称为“FIR”方法， Joe Clark在《Facts and Opinion About Fahrner Image Replacement》一文中有做深入的介绍。使用这种方法需要注意两点：

1. 结构性需要增加一个标签包裹文本；如上面的HTML Markup所示；
2. 需要把背景图设置在外标签上，并且将文本外标签隐藏。

这种方法有一个不好的地方就是不利于阅读器浏览网页。

方法二：

HTML Markup

<h1 class="technique-two">w3cplus</h1>

CSS Code

.technique-two {
  width: 2329px;
  height: 79px;
  background: url(images/w3cpl