利用text-indent属性隐藏文字

在网页设计中，由于图片更具表现力（例如网站logo），所以我们往往利用图片代替文字标题来表现某些内容，这种代替不是说要用一个<img/>标签完全替换文字，如果这样的话，就不利于搜索引擎抓取我们的网站页面，这个时候我们往往利用隐藏文字（以图换字）这个小技巧来达到目的，既能够用图片很好的表现我们的文字标题，又能够很好的照顾到搜索引擎的蜘蛛。

 

实现原理：

1，利用图片作为文字标题的背景；

2，把图片上面的文字隐藏起来；

 

具体实现方法：

 

1，HTML代码：

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title >隐藏文字 </ title >
< link href ="css.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< h1 id ="logo" >< a href ="#" > 博客网 </ a ></ h1 >
</ body >
</ html >

 

 

2，CSS代码：

代码

#logo a {
background:url(http://images.cnblogs.com/adminlogo.gif) left top no-repeat;
height: 51px;
width: 133px;
text-indent:200px;
white-space:nowrap;
overflow:hidden;
display:block;
}

 

 

3，说明：

   我们是通过使文字溢出但不显示（overflow:hidden）的方式来达到隐藏文字的，display:block主要是用来解决在IE6版本显示不正常问题的，

white-space: nowrap主要是让图片上的文字在一行内显示完（也就是要让文字正常溢出51px*133px这个范围），让文字溢出但不显示（overflow:hidden）生效。

转载于:https://www.cnblogs.com/daxiong/articles/1728355.html