0

の 2 種類があります<td>。1 つは<td class="GH>で、2 番目は です。<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;

}

残念ながら、それは機能していません。の背景に画像を取得しますが、それはすべての画像であり、すべての円があります（クラスを持たない他のすべてのものは、本来あるべき空です）。もう1つの問題は、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 に答える