CSS图像替换技术的几种方案介绍

图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。
由此可以见图像替换的重要。

也许你会说直接放一副图片或加上背景不行吗？为什么要写上文本有把文本隐藏呢？这不是多此一举吗？这样做确实能达到一样的视觉效果，但对搜索引擎是不利的。因为搜索引擎不能从这块地方的到任何内容，它就不知道这块地方要表达什么意思。而使用图像替换技术对搜索引擎就很友好。在引用《CSS禅意花园》中的一段：

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。
直接使用图像或背景是传统表格布局使用的方法，而图像替换是CSS布局使用的方法。这又一次证明了CSS布局的网站更有优点。

Levin的方案：
Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长，让人难以理解。

HTML代码：

XML/HTML Code复制内容到剪贴板

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>  

CSS代码：

CSS Code复制内容到剪贴板

.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);   
}  

优点：屏幕阅读器可正常访问；解决浏览器禁用图片后空白页面的可访问性问题。