CSS图像替换技术之Levin的方案
日期：2008-09-6 分类：CSS
以下内容摘自《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。
点击这里查看其他图像替换方案。
这个方法是好 不过有链接的话 就不能用这个方法了
可以的，写成
<h3 class="replace" id="myh1"><a href="#">And a dash of Thyme.<span></span></a></h3>或
<h3 class="replace" id="myh1">And a dash of Thyme.<span></span><a href="#"></a></h3>
都可以，只是写成
<h3 class="replace" id="myh1"><a href="#">And a dash of Thyme.<span></span></a></h3>
在 IE 浏览器里鼠标移上去不会显示手型，但点击还是没有问题的，仍然能进入相应的链接。