深圳网站建设在做网站的时候，经常遇到需要把导航文字切成图片的，如下图的这个导航就是需要把文字做成图片，否则达不到这种效果。
把导航做成图片，问题就产生了。这种方式在一定程序上影响了网站在搜索引擎中的收录情况，几经周转，信利科技想到了最佳的解决办法，既做成图片也不影响收录，这就是用CSS来隐藏文字。
想到了解决办法，那么我们就用实例来说明一下如何用CSS隐藏文字。
我们先看导航的HTML代码：
<div id="menu">
<ul>
<li><a href="#" id="nav_home">首页</a></li>
<li><a href="#" id="nav_about">关于我们</a></li>
<li><a href="#" id="nav_news">新闻资讯</a></li>
<li><a href="#" id="nav_product">产品中心</a></li>
<li><a href="#" id="nav_job">人才招聘</a></li>
<li><a href="#" id="nav_service">服务中心</a></li>
<li><a href="#" id="nav_contact">联系我们</a></li>
</ul>
</div>
导航的CSS代码如下：
#menu { position:absolute; top:60px; right:0; width:700px;}
#menu ul { margin:0; padding:0; list-style:none; overflow:hidden;}
#menu ul li { margin:0; padding:0; float:left; width:89px; height:39px; margin-right:10px; display:inline;}
#menu ul li a { width:89px; height:39px; line-height:39px; background:url(../images/menu.jpg) no-repeat; text-indent:-99999px; overflow:hidden; display:block;}
#menu ul li a#nav_home { background-position:0px 0px;}
#menu ul li a#nav_home:hover { background-position:0px -39px;}
#menu ul li a#nav_about { background-position:-99px 0px;}
#menu ul li a#nav_about:hover { background-position:-99px -39px;}
#menu ul li a#nav_news { background-position:-198px 0px;}
#menu ul li a#nav_news:hover { background-position:-198px -39px;}
#menu ul li a#nav_product { background-position:-297px 0px;}
#menu ul li a#nav_product:hover { background-position:-297px -39px;}
#menu ul li a#nav_job { background-position:-396px 0px;}
#menu ul li a#nav_job:hover { background-position:-396px -39px;}
#menu ul li a#nav_service { background-position:-495px 0px;}
#menu ul li a#nav_service:hover { background-position:-495px -39px;}
#menu ul li a#nav_contact { background-position:-594px 0px;}
#menu ul li a#nav_contact:hover { background-position:-594px -39px;}
这里红色部分的text-indent:-99999px;是将文字首先缩进，然后我们再加上overflow:hidden; display:block;就可以顺利的将文字隐藏起来了。