问题标签 [css-sprites]

我有一个精灵图像设置为我页面上元素的背景，但是我如何找到正确的偏移量以便我可以在屏幕上实际看到它？

我在一个网站上工作，该网站使用三个小图像作为 twitter、facebook 等的链接。我有一个标注图像，当我将鼠标悬停在图像上时我想显示它。

这里的关键是标注图像不会干扰页面上的其他图像和文本。

是否有一个方便的解决方案可以满足这种需求？

我希望在页面上显示大量缩略图（超过 200 个）。我想使用 CSS 精灵来加载它们以最小化 HTTP 请求。我认为将它们全部放在一个大文件中是个坏主意，但是将它们分成大约 6 个 40-50 个缩略图的文件应该可以很好地工作。

所有缩略图都是相当低的颜色（可以减少到 256 种颜色而不会降低质量），但总的来说，所有缩略图都覆盖了更多的颜色。

那么，有没有一种简单的方法可以根据颜色对它们进行分组？将每组文件放在单独的文件夹中很好，因为我可以稍后使用 ImageMagick 或在线精灵工具缝合在一起。但是在一个（使用 CSS）中完成所有这些也会很好。

更新：按颜色分组的原因：
这个想法是为了节省更多带宽。如果我有 10 个主要是蓝色的缩略图，10 个绿色和 10 个红色，我可以将它们组合成 3 个图像，将每个图像减少到 256 种颜色。如果我混合缩略图，那么减少到 256 色会使图像质量变差。

我找到了一些关于精灵导航菜单的教程。我现在的问题是当我在本地制作时，我尝试选择每个菜单并且它没有突出显示。悬停工作正常，只有突出显示的选定菜单不起作用。

这是链接 http://webberzsoft.com/tabmenu/services.htm

任何帮助将不胜感激。

谢谢

蒂尔索

有没有人使用过 SVG 来制作图像精灵？我希望用一些可缩放的 SVG 图像替换一堆非常相似的 GIF 和 JPG，但是图像渐变和按钮形状规范使 SVG 膨胀。

如果我可以创建一个复合图，那么我可以重用渐变和基本按钮形状等。我只是不确定是否可以在（比如说）CSS 文档中引用 SVG 图像。我认为不是，因为必须通过 embed 或 object 标签而不是 img 标签来使用 SVG。

也许我可以以编程方式，例如使用 jquery，获取主 SVG 文档的片段并使用它来按需组合 SVG 图像。但我认为这会很慢？

谢谢，

安德鲁·马修斯

1. css-sprite 是好技术吗？我在http://spriteme.org/上阅读了它的优点，并且我在 stackoverflow 中也看到了很多关于 css sprites 的问题。

2. 它有什么缺点？

3. 它会在他们网站上声称的所有浏览器中工作吗？

我的客户非常投入使用我们为他开发的一种形式的非传统输入。下图表示接口的各种状态，最后一个表示它在当前上下文中被禁用。最终用户将接受如何与输入交互的培训。

替代文字 http://www.noflaflash.com/interface.gif

我的想法是，我们将开发一个表示图像可点击区域的图像映射，并让 onclick 事件设置一个隐藏字段并更改元素的 CSS 以将背景精灵移动到适当的坐标。

人们对此怎么看？除了禁用 JavaScript 的人之外还有明显的缺陷吗？

我希望最终解决方案对 iPhone/其他设备友好。

您的想法将不胜感激。

我用 css sprites 制作了一个 css 菜单，但问题在于 sprite 我们不使用仅在后台使用的内联图像，因此如果在浏览器中禁用图像，则不会显示任何内容。有什么解决方案吗？

例如 ：

查看此菜单并关闭图像： http: //line25.com/wp-content/uploads/2009/css-menu/demo/demo.html（如果在浏览器中禁用图像，则不会看到）

这个菜单反对这个报价

确保您的网站在禁用图像的情况下工作

主意。尽管几乎已成为过去，但仍有用户以非常低的互联网速度运行。此外，如果用户需要（无论出于何种原因）禁用图像，他们仍然可以访问他们需要的所有内容吗？

http://csswizardry.com/quick-tips/#tip-02

我们不应该使用这种类型的导航吗？

有谁知道是否存在任何离线软件或插件（dreamweaver 等）来生成 CSS 精灵。即：合并图片，生成css规则。

我知道这里有一个帖子：制作 CSS 精灵的工具？

但所有这些都是在线生成工具。

I am using csssprites in my application. Css images is successfully loaded all browser except IE 6 and IE 7 . I dont know how fix this problem.

For Your Reference My Html Pages Blockquote

My stylesheet