今天小编跟大家讲解下有关深入分析网页CSS隐藏文字和以图换字技术 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关深入分析网页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) 最终代码如下:代码: 以下为引用的内容：.texthidden{text-indent:-9999px;white-space:nowrap;line-height:0;} 3.overflow:hidden：这是一个比较合理且我最喜欢的方法 具体代码如下:代码: 以下为引用的内容：.texthidden{display:block;overflow:hidden;width:0;height:0;} 附加：positon:absolute：用绝对定位将其推出可视区 不过虽然可视性不存在 但仍占据物理空间 与隐藏文字的宗旨相背 代码请看:代码: 以下为引用的内容：.texthidden{positon:absolute;margin-top:-9999px;margin-left:-9999px;} 下来列举图象替换的流行技术 希望可以帮助你更好地掌握它们并了解各自的局限性：1.display:none：此处使用该方法时 需要多添加一层额外的无语义的结构(此处用了span)来应用display:none; 即<h1><span>标题/span></h1>,再加上上述的缺陷 所以最好不使用该技术。2.text-indent:-9999px：隐藏文字中已经都说了 只需在代码中去除line-height:0;,再添加background:url();即可 但text-indent:-9999px;在不同的浏览器存在差异 比如在IE5下就常会出现背景显示不出来或是滞后问题 不过总的来说 在图象替换方面它还是一个不错的方法。3.overflow:hidden：这依旧是一个我最喜欢的方法 但合不合理却不敢妄言 具体代码如下：代码: 以下为引用的内容：.replacement{display:block;overflow:hidden;width:300px;height:100px;padding:100px 0 0; background:url();} 若需要替换一个带链接的文字(即a出现在文字标签中) 则需要对代码稍做些改动 具体代码如下:代码: 以下为引用的内容：.replacement,.replacement a{display:block;overflow:hidden;width:300px;height:100px;}.replacement a{padding:100px 0 0; background:url();} 对于该代码需要注意的是 必须在父级标签中加一个overflow:hidden；,因为在IE下会出现一个小bug:a的内容没办法溢出隐藏。附加：positon:absolute：以上三种替换方法都有一个共同的缺陷 那就是：如果浏览器禁止显示图片且打开CSS或者用阅读器之类的话会造成用户无法接受信息。为了解决这一问题 在《css mastery》一书中 给我们提出了这样一种方法：将一个图象覆盖在文字上而非隐藏文本 代码请看：代码: 以下为引用的内容：<style type="text/css">h2{positon:relative;width:300px;height:100px;}h2 span{positon:absolute;width:100%;height:100%;background:url();}</style><h2><span></span>晋西浪子</h2> 当然它也有缺陷 比如 添加了一层额外的无语义的结构(比display:none内的更加没有意义) 还有它必须使用具有实色背景的图象。来源：爱蒂网
