列表项的精灵

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 加载精灵，因此请使用例如

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 for list items

css

sprite