css - 从 Sprite 中获取图像并将其放入 <td> 标签中

Question

我有两种 <td> , 一个是 <td class="GH> , 第二个是 <td class="BH">

我有一个 sprite 图像，其中包含 10 个不同颜色的圆圈。

我需要做的是在<td class="GH>中只放入绿色圆圈和 <td class="BH"> 中的蓝色.

圆的大小是13px上的12px

我的CSS是这样的:

td.GH
{
    background: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);
    width:12px;
    height:13px;

}
td.BH
{
    background: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);
    width:12px;
    height:13px;

}

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

谢谢大家

Answer 1

您需要在 Sprite 上指定图像的 X 和 Y 坐标。

Sprite 的左上角是0 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;

}