css面包屑使用图像精灵

Question

我有一个图像，我需要使用它作为面包屑背景图像。我尝试过，但似乎没有正确的。我为此创造了一个小提琴。有人可以帮助我，我做错了什么。我不应该改变HTML，因为相同的文件也在其他应用程序中使用。只有CSS，我可以改变。

HTML

<div id="itemDisplay"> 
    <a href="www.abc.com" class="step1only"><span id="step1" class="step_on" title="Home">Home</span></a> 
    <span id="step2" class="step_off" title="Vehicle">Vehicle</span> 
    <span id="step3" class="step_off" title="Vans &amp; Trucks">Vans &amp; Trucks</span> 
    <span id="step4" class="step_off" title="Vanagon">Vanagon</span> 
</div> 

我重视图像的实际痕迹应该怎么看起来像

在我的小提琴文本的对齐是不是除了第一个文本正确。文本应该向左对齐。最后一个面包屑也是不正确的。 当用户在第一页，只有第一个面包屑文本应该大胆，当他浏览到第二页，只有第二要大胆

http://jsfiddle.net/Dbudt/5/

请指点

Answer 1

Updated demo

我已经添加了.active类，因此您可以在需要的页面上跨度使用它。 我也固定在填充了span.step_off

UPDATE

我修复background-position最后一个元素。