本篇继续再说说在网页中导航栏背景图片的一个处理技巧。我们能经常看到一些网站的导航栏中，每个链接都有漂亮的背景图片，如使用一些很web 2.0的设计图片。背景图片的运用会让网站的导航栏更为醒目和吸引。但同时你是否也会想到另外一个问题：就是我们并不能保证导航栏中每个链接的文字长度都是一样。譬如，象“about”和“guestbook”这两个常用的链接长度就很不一样了，那我们是不是需要为每一个长度的链接都设定一张背景图片以适应它们间不一样的长度呢？
其实是不需要的。在CSS Navigation Bar With Only 1 Image这篇文章中，作者介绍了一种只使用一张背景图片的设计方法，作个例子如下图示：
上图中“about”和“guestbook”两个按钮的长度不同，假设“guestbook”按钮为最长，我们只需要准备一张与其长度相同的背景图则可。
我们设计导航栏的链接代码如下，一般是在header.php文件中：
<ul class="image">
<li>
<a href="#" title="About"><span></span>About</a>
</li>
</ul>
然后我们对这个链接样式设定背景图片的运用，CSS的样式代码如下：
ul.image li a {
background: url(bg.png) no-repeat top right;
}ul.image li a span {
background: url(bg.png) no-repeat top left;
}
大家看了上面的两段代码后应该能看出了吧，需要注意的地方我用红色字体标记出了。其实我们是利用在链接中的一个内容为空的<span> </span>标记来定义背景的左侧部分，让背景按上-左（top left）定位；而对于链接再定义一个背景，用的还是同一样背景图片（bg.png），但注意，我们把它按照上-右（top right）定位，这样来定义背景的右侧部分。
还是不太明白？再来一张图：
其中箭头为各自设置背景图片的部分显示。其实就是为一 个链接设置两次的背景，第一次取其左侧，第二次取其右侧。
另外上面的代码比较简略，如需详细参照，还是请看介绍原文中的代码部分。
