Html 从sprite获取图像并添加到a href

我已将所有图标添加到精灵中。 现在，我需要显示一个带有链接的精灵图标。 当我添加精灵并在链接上设置其背景位置时，链接的所有背景都是精灵精灵。

a{
背景图片：url（'sprite.png'）；
}
.精灵链接图标{
左侧填充：20px；
背景位置：-36px-10px
}

如何设置精灵的宽度和高度，使其仅显示一个图标

是在“a”标记中添加两个div的唯一方法吗？首先，带精灵图标的div和设置的宽度和高度，以及在其他文本中

<a href="">
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div>
    <div>test link</div>
</a>

---

您可以使用

：before

或

：after

将实际背景移动到另一个（伪）元素，该元素正好与一个图标的大小相同

大概是这样的：

.icon {
  /* nothing special here, just a dynamic element,
     maybe with a fixed height? */
}
.icon:before {
  content: '';
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url(...) etc;
  margin-right: .25em; /* might not be necessary due to inline-block */
}

---

小提琴：（尺寸不对，因为我手边没有一个好的精灵）。

你不能这样做，当你做精灵时，你应该知道元素的宽度和高度是多少

---

当您在“a”标记中添加一个跨距并向其添加背景（具有特定的宽度和高度）时，可以解决此问题。或者您可以重新排列您的精灵。

在样式中使用此代码：

a
    {
        background-color:#00cc00;
        padding-left:20px;
        }

    a span
    {
        background-color:#fff;            
        }    

然后这个html：

<a href="#"><span>test link</span></a>

答案正确的和可能重复！就我而言，这是正确的答案。无需额外的HTML，可回到IE7，并且在精灵大小需要更改时可轻松重新配置。

<a href="#"><span>test link</span></a>