深入分析网页CSS隐藏文字和以图换字技术

打开电脑，感觉没有什么事可做，就随便拿起《css mastery》翻了下，刚好看倒图像替换这块，突然想起前些天曾有一网友问过该问题，就想总结出来，以便自己和网友今后参考。

正式进入使用方法总结之前，我们需要先理清几个概念，1.二者的区别：隐藏文字是要把你不需要显示的文字隐藏掉,可能因为它妨碍美观或暂时不需要显示，也就表明此时文字的视觉可视性和物理空间存在性都没有；而图象替换就是用设计好的图片以背景的方式取代文字，目的是为了使用户有更好的视觉享受，因为设计人员对文字只有有限的选择能力，但如果不写文字而直接使用背景图象又对搜索引擎不大友好，故而发明了图象替换。可能这会有些朋友有这样的疑问：为什么不直接用<img />标签呢？这就涉及到标准中的分离了，在标准中只有数据才应该直接写到Xhtml中，很显然这儿的图片只能算作表现，因此，图象替换中文字虽然是不可见的，但它的物理空间仍然存在。2.什么时候该用图象替换？由于图象替换技术在关闭图象且打开CSS的情况下将出现内容空白，所以应当尽可能避免使用它，当然如果文字需要使用特定字体，且不是很重要的信息时可以考虑使用。我特别想提及的是logo到底该不该应用图象替换？我认为logo(既非banner也非标题)是应当作为数据出现的，因为它是一个站点的标志。好了，言归正传，开始列举常用方法。

先说CSS隐藏文字的几种常用方法，并顺便解释下各自的优缺点：

1.display:none：它可以使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略。

2.text-indent:-9999px：text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，但还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体(在IE下有点BUG)，最终代码如下:

代码:

3.overflow:hidden：这是一个比较合理且我最喜欢的方法，具体代码如下:

代码:

附加：positon:absolute：

用绝对定位将其推出可视区，不过虽然可视性不存在，但仍占据

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!