前端培训之以图换字的几种方法及优劣分析

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

思路

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>

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

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)