通过CSS实现图片替换文字

esybq

通过CSS实现图片替换文字

   通常情况下，我们使用标准的html而不是图片来显示文字，因为文字除了加快下载还可以获得更好的可用性，但是如果碰到为了美观决定使用大部分访问者电脑中可能没有的字体时，我们只能选择图片。
   举例来说，如果想在每一页的顶部都用"hello word"的标题，但同时又希望这是能被搜索引擎发现的，为了美观我们使用了少见的字体那么我们就得用图片来显示了：
    <h1><img src="/hello word.gif" alt="hello word"/></h1>
   这样当然没错，但是搜索引擎对真实的文本的重视远超过alt文本，因为已经有太多网站使用alt文本充当关键字。因此我们可以采用另一种方法：<h1><span>hello word</span></h1>,那漂亮的字体怎么办呢？下面的CSS帮我们解决问题：
h1{background:url/(/hello word.gif) no-repeat;}
h1 span{position:absolute; left:-2000PX;}
X现在既用上了漂亮的图片有很好的隐藏了真实文本-借助CSS，文本被定于屏幕的左侧-2000像素处，而现实在访问者面的是图片的背景，这样访问者和搜索引擎都可以兼顾到。