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

作者佚名技术来源 CSS技术浏览发布时间 2012-03-06

物理空间，与隐藏文字的宗旨相背，代码请看:

代码:

以下为引用的内容：
.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>

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

分享到：更多

你可能对下面的文章感兴趣

上一篇: PDF、ZIP、DOC链接的标注(CSS技巧)下一篇: 帮助你好好学习CSS的“边”和“内容”

关于深入分析网页CSS隐藏文字和以图换字技术的所有评论

随机推荐