列表项的精灵

Question

美好的一天 我正在尝试使用社交媒体图标的精灵来获得一个简单的列表。 这是我的期望：

我尝试了下面提到的代码，但不幸的是，它没有显示任何内容。 谁能告诉我如何以正确的方式使用它？

.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

如评论中所述：

你需要用类加载精灵，所以请使用例如

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设置精灵位置。