CSS Sprites限制

CSS Sprite非常有用，有助于加快加载时间和性能。但我觉得他们有一定的局限性。我想知道是否有办法解决这个问题，或者它是否固有，而且它们是有限的。CSS Sprites限制

例如：如果我想在我的锚链接的箭头图标是在右手边：

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？

来源

2012-02-08 Steven Wu

可否请你澄清什么是预期的行为？如果精灵图像的构建正确，则可以将图像放置在精灵的位置，这一点没有限制。也不要将像右上方这样的单位与像素混合在一起，因为IE可能有问题。 – 2012-02-08 11:22:51

预期的行为是让背景图标始终坐在右侧，但悬停时应该仍然在那里。穆罕默德在这里提供了一个解决问题的办法 – 2012-02-08 12:16:36

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

这是一个使用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，检查此其他回复＃1支持：
:after and :before css pseudo elements hack for IE 7

来源

2012-02-08 10:44:45 Meligy

这看起来像是一个完美的解决方案。感谢穆罕默德。需要进行测试以确保它在旧版浏览器中可用 – 2012-02-08 12:15:08

对于以前的浏览器，请检查答案更新。 – Meligy 2012-02-08 12:33:02

回答

相关问题