css - 列表项的 Sprite

Question

美好的一天我正在尝试将社交媒体图标的 Sprite 用于一个简单的列表。这是我的期望:

我试过下面提到的代码，但不幸的是，它什么也没显示。谁能告诉我如何正确使用它？

.sprite {
    background-image: url(img/spr.png);
    background-repeat: no-repeat;
    display: block;
}
.soc1 {
    width: 37px;
    height: 37px;
    background-position: 0 0;
}

.soc2 {
    width: 37px;
    height: 37px;
    background-position: 0 -37px;
}

.soc3 {
    width: 37px;
    height: 37px;
    background-position: 0 -74px;
}

<ul class="secondlist">
  <li class="secondlist_item">
    <a href="#" class="soc1" title="Facebook"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc2" title="AskMe"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc3" title="Twitter"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc4" title="MySpace"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc5" title="Feed"></a>
  </li>
</ul>

Answer 1

如评论中所述:

你需要用类加载 Sprite ，所以使用例如

class="sprite soc1"

将 CSS 更改为:

.sprite {
    background-image: url(img/spr.png);
    background-repeat: no-repeat;
    display: block;
    width: 37px;
    height: 37px;
}
.soc1 {
    background-position: 0 0;
}

.soc2 {
    background-position: 0 -37px;
}

.soc3 {
    background-position: 0 -74px;
}

然后您只需使用例如soc1 设置 Sprite 位置。