6

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

a{
    background-image:url('sprite.png'); 
}
.sprite_link_icon{
    padding-left: 20px;
    background-position: -36px -10px
}
<a class="sprite_link_icon" href="">test link test</a>

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

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

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

3 回答 3

3

您可以使用: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 */
}

小提琴： http: //jsfiddle.net/rudiedirkx/RG3Kd/（尺寸错误，因为我手边没有好的精灵）。

于 2013-05-06T18:46:00.373 回答
0

你不能这样做，当你在做精灵时，你应该注意元素的宽度和高度是多少。

当您在“a”标签中添加一个跨度并向其添加具有特定宽度和高度的背景时，您可以摆脱这个问题。或者你可以重新排列你的精灵。

于 2013-05-06T18:49:12.803 回答
0

在样式中使用此代码：

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

    a span
    {
        background-color:#fff;            
        }

然后这个html：

<a href="#"><span>test link</span></a>
于 2013-05-06T19:03:30.337 回答