两种常见的CSS“图像替换”技术

1.FIR（由Todd Fahrrner开创）

把要替换的文本放在span标签中

<h2>

       <span>Hello World</span>

</h2>

然后把要替换的图像作为背景应用于标题元素：

h2｛

    background:url(/img/hello_world.gif) no-repeat;

    width:135px;

    height:35px;

｝

隐藏span的内容：

span｛

   display:none;

｝

不足：最后一个规则会造成问题，许多流行的屏幕阅读器会忽略display为none或visibility为hidden的元素

 

2.Phark（由Mike Rundle开创）

<h2>Hello World</h2>

Phark方法不采用display方法隐藏文本，而是用text-indent对标题采用非常大的缩进

h2{

    text-indent:-5000px;

    background:url(/img/hello_world.gif) no-repeat;

}

不足：与FIR方法一样，在关闭图像，在打开CSS的情况下是无效的

 

问题：图片就是要显示的文字效果，为什么还要添加文字并隐藏？

（1）HTML的语义化；

（2）SEO，提高网页被搜到的概率；