以图换字的几种方法及优劣分析

以图换字，其实是为了保证页面的可读性，视觉效果等。这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：

思路

1：使用text-indent的负值，将内容移出容器

.test1{

width:200px;

height:50px;

text-indent:-9999px;

background:

#eee url(*.png) no-repeat;

}

以图换字之内容负缩进法

该方法优点在于结构简洁，不理想的地方：

1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；

2.当该元素为链接时，在非IE下虚线框将变得不完整；

3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异思路

2：使用display:none或visibility:hidden将内容隐藏

.test{

width:200px;

height:50px;

background:#eee url(*.png) no-repeat;

}

.test span{

visibility:hidden;/* 或者display:none */

}

以图换字之内容隐藏法

该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂思路

3：使用padding或者line-height将内容挤出容器之外；

.test{

overflow:hidden;

width:200px;

height:0;

padding-top:50px;

background:#eee url(*.png) no-repeat;

}

.test{

overflow:hidden;

width:200px;

height:50px;

line-height:50;

background:#eee url(*.jpg) no-repeat;

}

以图换字之内容排挤法

该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack思路

4：使用超小字体和文本全透明法；

.test{

overflow:hidden;

width:200px;

height:50px;

font-size:0;

line-height:0;

color:rgba(0,0,0,0);

background:#eee url(*.png) no-repeat;

}

以图换字之超小字体+文本全透明法

该方法结构简单易用，推荐使用。

了解更多内容：

web前端之二叉搜索树

前端最常见的四种排序算法

web前端js框架有哪些

前端模块化的理解

前端项目性能优化-面试题