问题标签 [css-sprites]

我试图在我的 CSS 中更加禅宗，同时也减少我的服务器上的负载。我听说过并看到了一种技术，我可以使用背景图像和偏移值来允许我将所有小图标图像下载到一个图像中，并使用 CSS 来显示正确的图像。但是，我有点困惑如何正确地做到这一点。具体来说，如果我有一个 16x16 的图像，在我的大图像中有 48 个像素，称为 img.png，我想要这样的东西：

（显然是把样式放到 CSS 中，但为了说明的目的，这里是内联的。）

但是， img 忽略了偏移量。如果我使用像跨度这样的东西，我不确定如何设置跨度的宽度（实际上我试过了，它似乎忽略了宽度。）

任何帮助，将不胜感激。

由于我对 jQuery spritely 插件方法有一个平移 ` 元素，我调用它来平移一些超级马里奥兄弟背景，它似乎增加了相当多的页面长度。

如果您访问http://www.marioplanet.com，您会注意到有 3 种不同的平移背景。只有2，不足以填满页面内容的整个高度，但是3平移，溢出太多，导致用户可以向下滚动页面，只是为了看到背景平移图片。

我想做的是用<div>我页面上最后一个元素的高度来切断第三次平移，在这种情况下，我的<div id="footer">元素。

关于如何做到这一点的任何想法？我想我总是可以只制作 2 个背景并压缩我的内容，但这并不好玩，是吗？:)

谢谢！

我通常在制作 CSS 精灵方面没有任何问题，但是这个让我很难过……而且我不知道如何解决它。基本上我有一个看起来像这样的导航精灵：

我正在使用将它们放置在<li>标签中的标准约定，例如：

然后应用 CSS 调整背景位置：

当然我没有想到这一点，但是问题发生在悬停时。由于您只能定义“方形”区域，因此当您将鼠标悬停在某个元素上时，“蓝色”悬停状态将转移到下一个导航项。

然后我认为我必须为每个项目制作单独的图像......但这也不会因为重叠的箭头部分而完全正确。

也许我必须分离出“中间”箭头分隔符？我真的不确定。

我被难住了。有任何想法吗？

我正在尝试优化我的网站以提高速度。我以前使用圆角的图像，但现在我已经用border-radius和-moz-border-radius css规则改变了它们。哪种方式最适合速度？我曾经认为 css 规则更快，但我看到很多网站都在谈论 css sprites，我现在有点困惑。哦，我不关心 IE 兼容性，所以你可以建议任何你想要的方法。

我希望在文本字段中出现一个国家的标志。

当所有图标分开保存时，它工作正常。例如：

但是，超过 60 个标志会产生很多可能的 HTTP 请求，因此我将它们放入一个垂直的 CSS sprite 图像（< 25 KB）中。

问题是，我无法使用 CSS 精灵获得相同的结果（一次只显示一个标志）：

截图（正确和错误）

如果不可能，您会建议哪些其他解决方案？每次用户输入不同的位置时，该标志都应更改。

我有一个基于 CSS 精灵的 Apple 主题导航栏，您可以在此处查看：

http://www.marioplanet.com/index.asp

现在，由于某种原因，我不知道为什么，“主页”按钮的悬停、按下和活动状态似乎存在问题。出于某种原因，它只是看起来是静态的。

这个文件，http://www.marioplanet.com/css/nav.css

其中有这个代码：

大概就是问题所在。

我一直在使用 Google 的 DevTools（基本上是 FireBug）来尝试隔离问题，但我没有任何运气。

“主页”按钮状态的选择器显示准确。

源图像（http://marioplanet.com/images/globalnav/wanzart.png）具有实际状态，所以这不是问题..

我正在尝试将 AlphaImageLoader 用于 PNG 图像，但我的图像是精灵图像。当我在 CSS 中使用 AlphaImageLoader 时，我没有得到我的精灵图像的输出。如何将 AlphaImageLoader 用于精灵？我可以将它用于精灵吗？

我正在尝试使用精灵图像我有一个非常基本的链接

我挣扎了一段时间，试图改变它并让它在我的精灵中使用图像而不是 src

任何人都可以评论是否将精灵用于图像的决定吗？我看到以下好处/权衡（其中一些可以减轻）：

单个图像上的精灵

优点：

• 需要管理的图像更少
• 更容易实现主题图像
• 图像交换 (JS/CSS) 发生得更快（因为它们不需要额外的图像加载）
• 由于 HTTP 请求更少，图像加载速度更快
• 要缓存的图像更少（尽管总体 KB 几乎没有差异）

缺点：

• 更多后台职位需要管理
• 图像负载可能过度膨胀（精灵可能包含未使用的图像），导致页面加载可能较慢
• 图片加载速度较慢，因为它们无法同步下载

我正在研究使用 CSS 精灵，但不想发明轮子。jQuery 或 jQuery UI 中是否存在现有支持？或者作为替代方案，一个调试良好的 jQuery 插件