Using Background Image to Replace Text

CSS Zen Book是一个被很多位置捧到天上的书，目前啃到一半，我觉得他里面提示的文章更有用。但可以原文都只有一个英文原文的链接，感觉有点可惜了，所以准备以后发现好文章就翻译过来。这是我翻译的第一篇文章，非正式的文章，仅仅作为辅助阅读，我更不是什么翻译专业，所以很多为是很随意的翻译。

这个文章跟我的关系挺复杂的：几乎每天都在用里面的方法，但是直到CSS Zen Garden的那本书里面提到这篇文章我才知道这个方法的来源和特点。尽管是一篇03年的文章，但是目前还有人在使用这种方法，而且是那种可访问性非常差的做法。所以看看这件事情的来龙去脉还是很有趣的。正文如下：

注意

文章中原来介绍的FIR图片替代法已经不再被推荐使用了，因为它使文字完全无法被屏幕阅读器使用。请看看在“重要说明”中提到的其他替代方法
这个教程需要CSS的基础知识，但不需要太多。除了那些，也需要你能够合理、正确地和标记语言配合使用。

介绍

你还在渴望用装饰性的图片而不是纯HTML代码进行标题的排版马？即使CSS已经提供了那么多的修饰选项，有时候我们还是忍不住打开Adobe Photoshop，然后在里面设置我们喜欢的字体、大小、间距等。你认为只要你将它储存为图片文件，然后插入到Web页面，任何一个具有图片显示能力的浏览器都可以显示它，对么？
但当我们知道我们不能使用图片作为标题字体的时候，我们就好像受到了当头一击。没有办法，我们只能降低我们的审美标准，放弃使用图片来美化标题的念头。事情就是这样，直到CSS的下载能力在许多年后能够更完善一些。
我们都知道图片的可访问性没有纯标记语言好。这一点在辅助性浏览器中更为突出。我们真该为使用图片做为文字而感到罪恶。图片不会在像Lynx这样的纯文字浏览器中显示，还有一些浏览器开启了禁止图片功能。尽管我们提供了alt属性作为补充，但搜索引擎的机器人总会以不平等的方式对待alt、 title和HTML文字。这是可以理解的，思考一下诸如H1、H2之类的标记在逻辑上的意义吧！当我们将他们恰当的组合起来，我们也不用为文件大小问题而伤脑筋。
好吧，让我们把脑袋里的知识先放一下。图片真的这么坏吗？配合一些简单的风格技巧和细心的编码，网页上的字体可以即漂亮又“无罪”，而且具有可访问性，同样也可以被索引收录。是时候在把图片搬出来了！

概念

总的来说概念是很简单的。我们写了一串段的HTML字符（例如“Hello World”），并且将其用两组HTML代码包围。然后我们用CSS来隐藏文字，并显示一个同样含义的图片。就是这么简单——用图片换文字就是这么点东西。
在我们写CSS之前，让我们写一些基础的标签。假设我们现在有一些如下所示的HTML代码：

<div>
<span>Hello world!</span>
</div>

当然，我们可以直接将样式应用到文本上。但我们想让它们比使用font-family或text-trasform更漂亮一些。我们想要更花哨一些的字体！毕竟当我们想向世界问号的时候，我们要说的华丽一些。
在我们像世界问好的文字中，我们挑选出Shelley Allegro作为字体。这是一个在设计界很有名气的书写字体，在我们说“hello”的时候，它有能力赢得千万人的心。不过我们认为这个字体只在世界上 1.65%的机器上可用。所以我们特地用图片做出了这个字体的“Hello”。这个图像会显示Shelley Allegro字体下的“Shelley Allegro”。这样不管别人的机器上有没有这个字体，他都能看到这种包含Shelley Allegro字体下的文字内容。
我们先记下图片的高度（35PX），之后会用到。
我们现在有一些HTML代码，一个漂亮的文本讯息，一副华丽的图片。我们该怎么使用它们？让我们卷起袖子来用一点CSS代码来用图片代替文字吧！

Fahrner图片替代法

这个图片替代的方发是以Todd Fahrner，想出这个主意的人来命名的。你可以想象得到有有两组HTML代码包围了文字——一个是div，一个是span。严格的来说，这两个标签可以有多种可能。事实上，你自定义的解决方案可能需要语义上更加恰当的标签。但在这里我们选择这两个通用的框架来举例。
进行图片交换的CSS代码主要包括两条规则。首先使用background属性来把图片带入div之内：

div {
background-image:url("hello_world.gif");
background-repeat:no-repeat;
height:35px;
}

注意height那个属性，它的值就是图片的真实高度。这样就确保div有足够的高度来显示图片。background-repeat属性是确保图片只显示一次。
现在唯一剩下的事情就是HTML内部的文本。现在就该Span标签上场了。我们需要第二个元素来特别的定义它。隐藏这段文字很简单

span {display:none;}

配合我们之后写的HTML代码，组合这两条规则就完成了一个简单的实力。这么简单，都让我想不通为什么会花费这么多文字来解释它。
当然我们决不能就这么简单把代码丢在那。我们也不能就这样直接使用基于元素的样式，否则页面的每个Div都会显示那个图片；而且任何放置在<span>Hello world!</span>标签内部的内容将会被隐藏。
让我们来看下更实际的例子。

[译者略过原文中的实际举例部分，由于废话太多，而且原理本身已经不再被推荐使用]

可靠的替换方法

这个替换方法在使用时应该小心。你要仔细的将图片和原文本一一对应。否则那就是对于浏览者来说就是不公平了。这个替换方法中，文字的字体、大小、颜色、大小写、间距等树形是可以调整的，但这个是设计阶段的事情，不能直接通过调整HTML代码来实现。但HTML本身要保留可读性，例如应加上适当的空格、大写字母等。
下面有必要提一下使用这个方法的缺点和警示：

尽管这个方法比直接插入图片的好，但对于搜索引擎来说这个昂法妨碍了他们索引的能力，用户也无法使用浏览器的“在页面内查找”功能找到你替换的文本。
尽管图片被禁用，但CSS仍有效的情况很少，但如果真的是这样，那么标题上就是一片空白。
替换后的文字将不可被用户操控，他们不能放大、修改颜色等。（纯HTML文本是可以的。

在一些特定环境下，使用这个替代方法需要有仔细的考虑。当真的要用这个方法，以上的那些告诫你必须记好了。狭小、对比度底的文字是不可靠的。定义字体或背景颜色时，色盲患者的问题必须考虑进去。
有时候好东西用得太多也会有副作用。当我们试验这个方法的时候，我们一定要小心。

浏览器兼容性

Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari
Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

重要说明

这个方法已经被证实在多数流行屏幕阅读器中失效。大家可以查阅Joe Clarks在A List Apart上发表的一篇内容详细、研究彻底的文章Facts and Opinion About Fahrner Image Replacement。
Joe在文中展现出来的结果表明FIR的做法本身就违背了它的初衷——创造一个更灵活、可访问性的解决方法，而不是直接用img标签和alt属性。这个方法的失策在于它完全没有预料到屏幕阅读器会无法读到带有display： none属性的元素。这是大多数屏幕浏览器的现状，就算我们设定了“screen”的media type情况也毫无好转。因为屏幕阅读器也会注意screen类型的media type，他们本身就是“阅读”屏幕嘛。大多数屏幕阅读器都不支持arual的media type，所以定义speark属性根本没有。

[译者注：CSS文档有对象类型的设置，平常我们用的最多的是对应电脑屏幕的media type，还有print、arual等类型对应不同应用。]

有人提议说用visibility：hidden来代替display：none；但这个同样会会阻止绝大多数阅读器的阅读。只有一个浏览器Jaws可以读出，但我们不能让别人只依赖着一个浏览器。
对于内容替代方法，仔细的权衡利与弊永远是对的。在这篇文章写完的时候，已经有不少其他替代方法了，每个都有它们的长处和短处。但不论哪种方法都没法完美的解决图片、文字的替代问题。已存在的FIR可替代方法如下：

Leahy/Langridge 图片替换法（FIR）

这个方法通过将父元素的height属性设定为0、overflow属性设定为hidden，可以省去span的存在。然后它使用padding- top去强制将元素变长，来显示图片。这个方法几乎同时被Seamus Leahy和Stuart Langridge想到。
[译者注：例如div高度为0，但有padding，浏览器还是会产生padding的高度，就可以显示图片而文字在padding距离之外，也就是被“隐藏”了]

Rundle的Text-Indent方法

Mike Rundle创造了一个简单的方法——通过使用text-indent属性来将包含的文字跳出可视元素范围之内。
[译者注：text-indent即缩进属性，就相当于把文字推到右边去，自然露出背景图片。]

覆盖方法

另一种Petr Stanicek和Tom Gilder发明的方法用一个空白Span元素来定位一个图片在文字的顶部。这个也让当图片被关闭时，文字可以被显示出来。
[译者注：将span元素绝对定位到父元素的正上面，设定背景图片就相当于把父元素div内的文字给盖住了；理论来说这个是比较完美的解决方案。]
想进一步阅读关于FIR的主题，可以去看看之前提过的文章 Facts and Opinion About Fahrner Image Replacement和In Defense of Fahrner Image Replacement。

[译者注：恕本人的懒惰，那两篇文章吵来吵去就那几个内容，没必要掺和。本来就是03年发起的讨论，如今提起只是希望把其中的概念，和解决方法的思维学习一下。]

PageTalks