今天做网站时碰到一个问题，一个PS设计好的导航字体在html中没有，但设计人员又不想换字体，而SEO人员又不希望用图片做导航，因为图片导航对搜索引擎不友好。类似的问题应该在做网站的时候经常会遇到。解决方法就是用css实现图片替换文字，同时又不失去文字：

<style type=”text/css”>
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>

<h2>
<span></span>Hello World
</h2>

思路是：首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位， 撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图 无法显示，将显示下层的文字内容，不影响正常使用。

但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。