背景图片定位

我已经创建了一个精灵，其中包含一整套我在我的web应用中使用的图标。然而，我在样式化链接时遇到了一个问题。我知道用CSS我可以操纵链接的大小并移动它的背景图像（精灵），所以我只在精灵中显示我想要的图标。这适用于没有文字的链接。但是，如果我有背景图片和其他文字的链接，那就是我遇到问题的地方。背景图片定位

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

我知道我可以 “夹” 的背景图像CSS3，但我试图避免在这一点上，因为我知道主要是旧的浏览器[如IE8 X（]将访问该网站，并不会看到这种变化。有没有办法做到这一点，而不需要额外的标签，例如<span>标签内的每个链接和造型的那些？我已经看到了一些例子，我可以使用AJAX库（如jQuery）来帮助解决这个问题，但对于一个小任务来说，这是很多汗。

我希望这不会让人困惑。

来源

2011-05-17 Oliver Spryn

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

来源

2011-05-17 16:00:19 lipelip

嗯...伟大的一点！我发现他们的精灵在“x”方向消除了所有入侵的图标。唯一的问题是，在某些情况下，我可能会在这个精灵的高度（也称为“y”方向）可能改变的情况下使用这个精灵的容器。是否有一个> = CSS2属性或图像调整，我可以用来解决这个问题，以及？ – 2011-05-17 16:05:02

我不知道一个属性可以帮助你做到这一点，我认为这个技巧在精灵中，就是你在其中定位元素的方式。您可以在y方向上找到其他示例： http://media.smashingmagazine.com/cdn_smash/images/css-sprites/digg.gif – lipelip 2011-05-17 16:32:51

嗯......好的。谢谢，lipelip！非常感谢您的帮助！ – 2011-05-17 16:56:47

这实际上很简单，与jQuery：只要指派所有这些元素像sprite一个共同的类。现在你可以检查它是否是IE8和运行此代码：

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

会创建一个与sprite类span。使用一些聪明的CSS，你应该能够将背景移动到sprite类的元素。

来源

2011-05-17 16:09:01

嗯...我甚至没有想到这一点。这是一个好点，因为这些棘手的链接可能都有相同的基类来定义其宽度，高度等。如果可能，我想先按摩图像/ CSS。但如果这不起作用，我会用你的建议。 – 2011-05-17 16:13:31

背景图片定位

回答

相关问题