Question

CSS Sprite很有用，有助于加快加载时间和性能。但我发现他们有一定的局限性。我想知道是否有办法绕过这个或者它是否是固有的并且它们是有限的。

例如：如果我想在我的锚链接上的箭头图标位于右侧：

a 
  display:block;
  padding:0 15px 0 0;
  background:transparent ("/images/arrow.gif") no-repeat scroll right top;
}
a:hover {
  background-position:-10px top;
}

这实际上不会起作用，因为我将箭头图标定位在我的锚标记的右侧。但是当我仍然希望它位于右侧时，我将如何移动图像-10px？

Answer 1

您可以使用:after伪元素在链接文本之后创建一个附加元素，但仍然在CSS锚定标记内，将其设置为精灵中每张图片的相等大小，然后才能使用背景位置没问题。

这是一个使用4个图像精灵执行此操作的示例，每个图像的大小为18px * 18px（我刚刚在谷歌图像上找到了图片，所以，甚至不确定它将有多长时间可用）：

要查看示例实时版本：http://jsfiddle.net/Meligy/CLLau/

代码的重要部分：

a:after {
    content: " ";
    display:inline-block;
    width:18px;
    height:18px;
    overflow:hidden;
    vertical-align:middle;
    margin-left:0.5em;
    background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif);
    background-position: 0 0;
}

a:hover:after {
    background-position: 18px 18px;
}

<强>更新

所有当前浏览器都支持此功能，在IE中，从IE8开始支持它。

对于支持IE 6,7的黑客攻击，请检查其他Stackoverflow回复：
:after and :before css pseudo elements hack for IE 7

CSS Sprites限制

1 个答案: