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类似的作品也都不可能实现。在对未来的提交作品要求中，禅意花园也明确地提出了这一点，鼓励大家发现更具可访问性、兼容性的图像替代方案。
