以图换字，其实是为了保证页面的可读性，视觉效果等。这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：
思路
1：使用text-indent的负值，将内容移出容器
.test1{
width:200px;
height:50px;
text-indent:-9999px;
background:
#eee url(*.png) no-repeat;
}
<div class=”test”>以图换字之内容负缩进法</div>
该方法优点在于结构简洁，不理想的地方：
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 */
}
<div class=”test”><span>以图换字之内容隐藏法</span></div>
该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂思路
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;
}
<div class=”test”>以图换字之内容排挤法</div>
该方法优点在于结构简洁，缺点在于：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;
}
<div class=”test”>以图换字之超小字体+文本全透明法</div>
该方法结构简单易用，推荐使用
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 前端培训之如何做1像素细边框的table
下一篇: 大数据培训课程靠谱吗
