CSS精灵问题

我被要求添加一个新的链接到现有的CSS精灵

我已经附上了图像布局的基本表示

从呈现的输出中可以看出，标记的外观如下所示：

<div>
  <ul id="pcnatabs">
    <li id="liTab1"></li>
    <li id="liTab2">
      <a href="#" id="tab2" class="active">one</a>
    </li>
    <li id="liTab3">
      <a href="#" id="tab3">two</a>
    </li>
    <li id="liTab4">
      <a href="#" id="tab4">three</a>
    </li>
    <li id="liTab5">
      <a href="#" id="tab5">four</a>
    </li>
  </ul>
</div>  

---

有一些现有的css正在使用，但是，当我修改图像添加第五个链接时，我没有太多的运气让它正常工作。因为我以前没有做过css sprite，所以我想最好是以自顶向下、逐步的方式来做，从第1步开始。有人能建议我从哪里开始吗？

如果是图像精灵，他们应该共享相同的背景图像，对吗

然后，您只需要指定与其他图像相同的背景图像、其他图像相同的宽度和高度、display:block，并且只需更改图像的背景位置

---

由于链接越多，图像的宽度就越大，可能必须为新链接沿x轴提供一个负背景位置。

当前CSS是什么？“CSS精灵”图像是什么样子的，它是你问题中的图像吗？请。是的，它是我问题中的图像。就CSS而言，它不会让我把它粘贴到这里…空间不够好吧，我想他们可以共享相同的背景。不过我还是不确定这东西是怎么工作的。我试图粘贴css，但似乎有一个字符限制。