CSS图像替换技术之Levin的方案
以下内容摘自《CSS禅意花园》一书，略有删减。
Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长，让人难以理解。
HTML代码：
<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>
CSS代码：
.replace{
position:relative;
margin:0;
padding:0;
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh1,#myh1 span{
height:25px;
width:300px;
background:url(thyme.png);
}
position:relative;
margin:0;
padding:0;
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh1,#myh1 span{
height:25px;
width:300px;
background:url(thyme.png);
}
优点：屏幕阅读器可正常访问；解决浏览器禁用图片后空白页面的可访问性问题。
缺点：无法使用透明图像；CSS代码较为冗长。
浏览器支持：
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；
苹果机——IE 5.2、Safari、FireFox。
点击这里查看其他图像替换方案。
