Css 从sprite中获取图像并将其放入<；td>；标签

我有两种

，一种是

，另一种是

中的蓝色

一个圆的大小是12像素对13像素

我的css是这样的：

td.GH
{
背景：url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
宽度：12px；
高度：13px；
}
td.BH
{
背景：url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
宽度：12px；
高度：13px；
}

不幸的是，它不起作用。 我在的背景中得到图像，但它是全图像，有所有的圆。（我的其他所有没有类的都是空的，因为它们应该是空的）。 还有一个问题，因为它是td，所以宽度和高度会改变td的宽度和高度，但我想要图片的宽度和高度

---

谢谢大家。

您需要在精灵上指定图像的X和Y坐标

精灵的左上角为0

因此，您需要添加以下内容：

<table>
 <tbody>
  <tr>
   <td class="BH"><span></span></td>
  </td>
 </tbody>
</table>

td.BH span
{
    background-image:url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
    background-repeat:no-repeat;
    background-position: 40px 130px; // edit to be the correct values for your image
    width:12px;
    height:13px;
    display:block;

}

td.BH跨度
{
背景图片：url(http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png);
背景重复：无重复；
背景位置：40px 130px；//编辑为图像的正确值
宽度：12px；
高度：13px；
显示：块；
}

http://localhost:36557/%D7%AA%D7%99%D7%A7%D7%99%D7%94%20%D7%97%D7%93%D7%A9%D7%94/Resources/images/status.png

这是什么？请阅读和@AspiringAqib这是图像在我的计算机上的位置，这不是问题，因为我在运行项目时可以看到图像。我尝试过这个，但它不起作用。这就是我得到的：[link]问题是css在单元格上“工作”，而不是在图像上。我试着这样做：但它不起作用。TD不会缩小到您指定的精灵的大小，因为其他TDs会导致它拉伸，因为它们有更多的内容。我建议在TD中放置一个SPAN标记，并将精灵作为SPAN的背景。我已经为你稍微修改了我的答案。你能给我举个例子吗？我尝试过这样做：但是在css中，我不知道如何进入这个元素，比如：tbody.tr.td.img.home当然不起作用。我已经编辑了我的答案，显示了使用SPAN标记的HTML代码。你不能按你建议的方式做。谢谢，但它不起作用。这有点复杂。我在jquery中创建如下代码：$（''）.html（reservation[“Status”]）.appendTo（tr）；创建我的表，当我写这个时：$（''）.html（reservation[“Status”]）.appendTo（tr）；它不起作用了。