博客 - 标签：图片替换

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

2008-05-23 上午 - html/css/xml/xsl - -

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

　　方法有多种：

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

  1. <h2><SPAN>我的世界</span></h2> 
  2.  
  3. h2 { background:url(my_world.gif) no-repeat; width:150px; height:35px;}
  4. h2 span { display:none;}

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

2.利用负值文本缩进：

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

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

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

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

  1. <h2><span><span>我的世界</h2>
  2.  
  3. h2 { width:150px; height:30px; position:relative;}
  4. h2 span { background:url(my_world.gif) no-repeat; width:100%; height:100%; position:absolute;}

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

４.利用flash

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

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

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

　　告一段落了！

No Comments »