CSS禅意花园阅读笔记三：图像文本替换

CSS禅意花园 Page123

1. 图像替换方法的提出

起源于在他的网站StopDesign 上发表的一个文章Using Background-Image to Replace Text ，解释了图片替换的技巧。其发明者是Todd Fahrner，因此该方法又叫Fahrner Image Replacement (FIR)。

HTML:

<h1 id="pageheader"><span>css zen Garden</span></h1>

CSS:

#pageheader {
    background: url(lemion.gif) top left no-repeat;
    width:  400px;
    height: 20px;
}

#pageheader span {
    display: none;
}

2. Leahy/Langridge Method

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif );
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

3. Rundle Method

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -5000px;
    height: 25px;
    background: url(sample.gif) no-repeat;
    }

注：Dave Shea在他的网站上有相关介绍。