背景图像定位答案

【问题标题】：Background Image Positioning背景图像定位
【发布时间】：2011-05-17 15:54:59
【问题描述】：

我创建了一个精灵，其中包括我在我的网络应用程序中使用的一整套图标。但是，我在设置链接样式时遇到了问题。我知道使用 CSS 我可以操纵链接的大小并移动其背景图像（精灵），所以我只在精灵中显示我想要的图标。这对于没有文本的链接非常有用。但是，如果我有一个带有背景图像和附加文本的链接，那就是我遇到问题的地方。

看看这些图片，这将解释我的困境：

我知道我可以在 CSS3 中“剪辑”背景图像，但我现在试图避免这种情况，因为我知道主要是较旧的浏览器 [如 IE8 X(] 将访问该站点，并且不会看到这个改变。有没有办法在不放置额外标签的情况下做到这一点，例如每个链接内部的<span> 标签并设置它们的样式？我已经看到了可以使用 AJAX 库（如 jQuery）来帮助解决问题的示例这个，但是对于一个小任务来说这是很多汗水。

我希望这不会令人困惑。

【问题讨论】：

标签： jquery hyperlink css background-image

【解决方案1】：

使用 jQuery 实际上很简单：只需将所有此类元素分配一个公共类，例如 sprite。现在您可以检查它是否是 IE8 并运行以下代码：

$('.sprite').toggleClass('sprite').prepend('<span class="sprite"/>')

这将创建一个带有sprite 类的span。使用一些巧妙的 CSS，您应该能够将背景移动到具有 sprite 类的元素。

【讨论】：

嗯...我什至没有想到这一点。这是一个很好的观点，因为这些棘手的链接可能都有相同的基类来定义其宽度、高度等。如果可能的话，我想先按摩一下图像/CSS。但如果这不起作用，我会使用你的建议。

【解决方案2】：

你需要在你需要的地方放置空格。这应该够了吧。就这样一个>http://css-tricks.com/wp-content/csstricks-uploads/youtube-sprite.png

【讨论】：

嗯...好点子！我看到他们的精灵消除了“x”方向上的所有入侵图标。唯一的问题是，在某些情况下，我可能有使用此精灵样式设置的容器，其高度（也称为“y”方向）可能会发生变化。我是否也可以应用 >= CSS2 属性或图像调整来解决该问题？
我不知道有什么属性可以帮助您解决这个问题，我认为诀窍在于精灵，即您在其中放置元素的方式。您可以找到他们在 y 方向放置空白的其他示例：media.smashingmagazine.com/cdn_smash/images/css-sprites/…
啊...好吧。谢谢，利普利普！非常感谢您的帮助！