0

我有两种<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的宽高，但是我要的是图片的宽高。

谢谢你们。

4

1 回答 1

0

您需要在精灵上指定图像的 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;

}
于 2012-12-24T11:20:49.603 回答