使用background-repeat来做一个简单的文字导航栏

首先，组织导航栏的html代码。

<ul>
 <li id="itemA"><a href="#">首页</a></li>
 <li id="itemB" class="select"><a class="urlB" href="#">原创</a></li>
 <li id="itemC"><a class="urlC" href="#">关于54173BLOG</a></li>
 <li id="itemD"><a class="urlD" href="#">网站建设</a></li>
</ul>
//a元素中仍然保留文字，这样可以保证用户在加载不到css文件的情况下仍能看到基本的内容。
//每个链接的背景都不同，需要单独定义，所以这里给每个链接一个类。
//li元素的id本例中没有用到，但在实际使用中，可以配合js来实现对当前页面的高亮显示。

其次，把导航栏的正常状态和hover状态做整体效果图并拼合在一张图片上。

做图注意：两种状态下导航栏上的文字相对于背景图案的位置要相同，否则会出现过渡效果不平滑，而相同的位置也便于我们在css中进行控制。（如本例，建议先做好一种效果，然后将其复制再修改颜色，这样文字相对背景的位置就不会有错了。）
另：如果链接间要留间距等，动手前就计算好，以便做图一步到位。

最后，通过CSS调整样式，实现最终效果。（查看演示页面）

.navbar {height:50px; padding-left:6px; overflow:hidden; background:url(01.jpg) no-repeat;}/*每个a元素都只能显示自己范围的背景，如果左右有空白、各元素有间距，需要为navbar定义背景图片，否则空白、间距处看不到我们的图片。*/
.navbar li {display:inline;}
.navbar li a {float:left; height:50px; text-indent:-9999px; background:url(01.jpg) no-repeat;}/*通过text-indent把a元素中的文字隐藏起来；为所有链接定义统一的背景图片。*/
/*以下分别定义了4个链接的宽度和背景图片位置。（本例中两种状态下文字在水平方向位置相同，在这里每个链接两种状态的背景图片就只有垂直位置不同了，这样控制起来就更方便。）*/
.navbar li a.urlA {width:78px; background-position:-6px 0;}
.navbar li a.urlA:hover,.navbar li.select a.urlA {background-position:-6px -50px;}
.navbar li a.urlB {width:75px; background-position:-84px 0;}
.navbar li a.urlB:hover,.navbar li.select a.urlB {background-position:-84px -50px;}
.navbar li a.urlC {width:211px; background-position:-159px 0;}
.navbar li a.urlC:hover,.navbar li.select a.urlC {background-position:-159px -50px;}
.navbar li a.urlD {width:126px; background-position:-370px 0;}
.navbar li a.urlD:hover,.navbar li.select a.urlD {background-position:-370px -50px;}
/*background-position两个参数的顺序：先水平，后垂直。“先左右，后上下”容易记错。*/