CSS 图片替换文字方案

一、Fahrner Image Replacement(FIR)

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

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

问题：当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

二、

<h2>
Hello World
</h2>

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

问题：当图片无法显示时，将导致这个区域没有任何内容。

三、

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

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

问题：背景图不能透明，否则将透出下面的文字。

参考自：http://www.codebit.cn/topic/css。