CSS图像替换技术之Fahrner的方案
日期：2008-09-5 分类：CSS
以下内容摘自《CSS禅意花园》一书。
2003年3月，Douglas Bowman在他的网站Stopdesign上发布了一个技巧（www.stopdesign.com/articles/replace_text)，让设计师能够用一张背景图像替代某元素中的文字，以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement，FIR）”。该技巧实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTML标记：
<h1 id="pageHeader"><span>css Zen Garden</span></h1>
我们可以使用下面的这段CSS容易地实现图像替换：
#pageHeader{
background:url(lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span{
display:none;
}
background:url(lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span{
display:none;
}
通过使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果确实一致的。图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。
点击这里查看其他图像替换方案。