利用css将文本替换为图片(图片替换)

某些时候，为了文字具有独特的字体，而不得不使用图片来做这些事情。这样一来，就不利于搜索引擎索引你的网站，而且，如果你是将图片嵌入背景的话，在css不可用的情况下将会是一片空白。那么我们就要想个办法来完善这个问题了。不过，还是尽可能的避免使用图像图换。

方法有多种：

1.最简单的一种，直接隐藏包含该文本的父标签：

<h2><SPAN>我的世界</span></h2>

h2 { background:url(my_world.gif) no-repeat; width:150px; height:35px;}
h2 span { display:none;}

这种发法虽然简单明了，但可能会造成一些问题。屏幕阅读器会忽略掉display值设置为none或hidden的元素。因此，最好还是不要使用这种技术。

2.利用负值文本缩进：

h2 { text-indent:-5000px; background:url(my_world.gif) no-repeat; width:150px; height:35px;}

有一点需要说明的，就是：当用户打开css，但是关闭了图片下载，用户将什么也看不到。所以我们再看下一个方法吧！

3.利用一个元素完全盖住文字：

它需要在替换的元素中加一个额外的标签：

<h2><span><span>我的世界</h2>

h2 { width:150px; height:30px; position:relative;}
h2 span { background:url(my_world.gif) no-repeat; width:100%; height:100%; position:absolute;}

记住背景图像一定要是实底的，否则下面的文字可能露出来哦！

4.利用flash

个人感觉不是很实用，有了上面三种方法来，这个就没什么必要了。这里简单的说下原理吧！

由于flash是可以保留字体的，所以这将有一定的意义。这个技术上利用flash与javascript交互，as调用js传给它的文本。所以只需一个flash，就可以重复的使用该技术，而并不是单独为某一处文字做一个swf。还有一个好处，即flash中的文本是可以搜索的，这意味着可以轻松的复制它。

具体细节和源码可以去www.mikeindustries.com/sifr找找。

告一段落了！