Question

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

我有一个精灵图像，有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

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

精灵的左上角是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;

}

从精灵中取出图像并将其放入标签中

1 个答案: