网页一、实际应用
略
二、图像替换
我们并不总是要文字呆在背景图像之上，很多作品都故意隐藏了标题等元素中的文本，取而代之的是一幅生动的图像。
设计师能够用一张背景图像替代某元素中的原始文字，以期显示出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement,FIR）”。该技巧的实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTMl标记：
<h1 id="pageHeader"><span>webjx.com</span></h1>
我们可以使用下面的这段CSS容易地实现图像替换：
#pageHeader {
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布局的一埠最为重要基石。
三、图像替换技术责任
图像替换技术使用display: none;本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中的img元素，若是没有了alt属性，那么对于Google等搜索引擎，以及辅助浏览设备（例如，阅读器即可阅读页面内容，并以声音的形式告知浏览者）之类无法呈现图像的客户端来说，将变得毫无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对何种客户而言，理解页面内容都不成问题。
但图像替换技术还有一个问题：Google能够读取到隐藏的文本，而有些屏幕阅读器却不能。图像替换技术的本意是让视觉不便用户也能够获取图像传递的信息，但实际上它却没有达到预期的目标。不但如些，若用户在浏览器中禁用了图像，但却仍保留CSS，那么屏幕上将什么都不会显示。且之些额外的span也增加了页面文件的大小，虽然并没有丈大的影响，但毕竟水够理想。
四、更好的技术
随着图像替换技术一天天地流行起来，这些问题也渐渐开始受到越来越多的人的关注。有没有这样一种技术，既可以为普通浏览者隐藏一些不必要的元素，也能将这些信息给需要的人呢？幸运的是，几乎在图替换技术开始流行的同时，另外一些替代的技术也开始走向成熟。其中有些在实现凶一些最为基础的要求的同时，也留下了一两个悬而未决的显著问题：而另一些则需要大量的CSS技巧及hack来实现跨浏览器兼容。在撰写本书时，沿没有一种完美的替代方案出现，我们只能在权衡利弊之后，根据实际需要在这些现有的方案中进行挑选。
1.Leahy和Langridge的方案
Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的<span>标签，且在保证屏幕阅读器可以正常阅读文本的同时，也能在页面中隐藏元素中的内容。但不幸的是，由于6.0版本之前的浏览器均不遵守盒模型，所以对于这类浏览器，我们还必须使用一些特殊的技巧来实现兼容。
HTML
<h3 id="header">I like webjx.com.</h3>
CSS
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(cola.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
优点：屏幕阅读器可正常访问；没有多余的<span>。
缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；实现需要hack。
浏览器支持：WindowsInternet Explorer 5.0+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.
2.Rundler的方案
设计师Mike Rundle提出了一种使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外。虽然该方案的适用性并不广泛——IE 5.0会将背景图片随文本一起推出浏览者的视线范围——但却相当简洁优雅。
HTML
<h3 id="header">Apple pie with cheddar?!</h3>
CSS
#header {
text-indent: -5000px;
background: url(sample-image.gif) no-repeat;
height: 25px;
}
优点：屏幕阅读器可正常访问；没有多余的<span>；简洁优雅的CSS。
缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；有时在IE 5.0中无法使用。
浏览器支持：WindowsInternet Explorer 5.5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.
3.Levin的方案
Levin Alexander想出了一个绝妙的主意：不再将文本置于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖住文本，并将背景图像应用到该span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，且也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。且这种方案所需要的CSS极为冗长，让人难以理解。
html
<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h1>
CSS
.replace {
position: relative;
margin: 0px; padding: 0px;
/* hide overflow:hidden from IE5/Mac \*/
overflow: hidden;
/* */
}
.replace span {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 1; /*for Opera 5 and 6*/
}
#myh1, #myh1 span {
height: 25px;
width: 300px;
background-image: url(thyme.png);
}
优点：屏幕阅读器可正常访问；解决浏览器禁用图像后空白页面的可访问性问题。
缺点：无法使用透明图像；CSS代码较为冗长。
浏览器支持：WindowsInternet Explorer 5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.
五、选择
应该使用哪种方法呢？这要自己选择。在大多数浏览器都支持前面提到的“CSS生成内容”的那一天之前，Leahy/Langridge, Rundle, 或Levin的方案仍然是最好的选择。若是图像替换技术没有出现，那么禅意花园中很多与Hellsing的Revolution类似的作品也都不可能实现。在对未来的提交作品要求中，禅意花园也明确地提出了这一点，鼓励大家发现更具可访问性、兼容性的图像替代方案。
