问题标签 [css-sprites]

我想在网站上使用CSS 精灵而不是单独的图像文件，用于大量相同大小的小图标。如何使用ImageMagick将它们连接（平铺）成一张大图像？

我正在尝试向我的网页添加一个选项卡，如下所示：

以这个例子为基础，我已经让它部分工作了。我的情况不同，因为我希望文本部分是固定的，但尾部部分可以动态调整大小以占用选项卡容器的其余部分。

它在 IE 6 中看起来不错，但并没有真正占据容器的整个宽度。在 Firefox 3 中，它根本不能很好地呈现：（红色是跨度之间的空白区域）。

如何让它在 IE6 和 Firefox 中正确呈现以占用为#Tab 指定的整个宽度？#Tab4 是我想调整大小以尽可能多地占用空间的区域。

我已经编写了代码，该代码根据页面中的 IMG 标签自动创建 CSS 精灵，并用 DIV 替换它们（我认为是）适当的 CSS 将精灵图像定位为背景，让适当的部分显示出来——问题是我不能让 DIV 充当 IMG 的替代品。

如果我将默认的“显示”值设置为“块”，那么如果原始 IMG 位于某些文本的末尾，则替换 DIV 将跳到文本之后的下一行（这当然是我所期望的带显示：块做）。

如果我将“显示”更改为内联，则 DIV 与文本保持在同一行，但它会忽略我设置的“宽度”和“高度”并折叠。我尝试将 ' 放在 DIV 中，但它只占用足够的宽度来包含 nbsp。

我尝试过将显示设置为所有可能的值（包括“晦涩”的值，如“table-row”、“run-in”、“compact”等），但都没有运气。甚至可以创建与 IMG 具有相同布局行为的 DIV 吗？

我愿意拥有比单个 DIV 更复杂的东西，但是我已经尝试了那里明显的东西（一个 DIV 在另一个内部 DIV 设置为显示：块与外部设置为显示：内联）但我没有也没有找到有效的组合。

在替换的 IMG/DIV 之外，我总是可以做一些特定的事情来获得我想要的布局，但我的目标是拥有一个通用的 auto-CSS-sprite 机制，无论 HTML 的其余部分如何，它都能正常工作。

I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..!

So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back:

So here is the HTML I am testing on, and for some reason all I get is a nice blank page:

Any tips?

我刚刚遇到了这篇关于 css sprites 扩展的文章，它启用了前景图像的 spriting 技巧。我尝试在 :hover 上使用该技术，但它似乎不适用于 IE 和 Opera。请参阅我尝试在此处使用此技术作为菜单：http ://www.kavoir.com/examples/jenny-css-sprites/menu.html

在 FF 和 Safari 上，它可以正常工作，但在 IE 和 Opera 中根本不工作。以几种方式修改了代码，但仍然根本不起作用。也许这是不可能的？

试图问作者，但她删除了我的评论。

知道如何在所有浏览器上进行这项工作吗？

更新：感谢您的回答，但 :hover 适用于 ，所以我相信所有的 IE 浏览器都应该解决这个问题。因此，问题很可能与剪辑属性有关。

我只是想确定 :hover 是否可以在 clip on 上正常工作。到目前为止似乎没有。

在最近的一个Stackoverflow 播客中，Jeff 谈到拥有一个图像文件，其中包含整个页面上的所有这些小图像，然后使用 CSS 对其进行剪切，以便所有图像都能正确显示。重点是减少服务器请求的数量，以便更快地加载页面。我就像“哇，这真的很酷，我真的可以在我们的产品中使用它”。

我的问题是：这是如何用 CSS 完成的？我需要使用背景图像加载图像，但是如何指定大图像中子图像的偏移量？也就是说，假设在（50px，50px）处的大图像中有一个锤子图标，它的大小为32px * 32px，我怎样才能强制浏览器只显示那个位？

有没有制作css sprites的好工具？

理想情况下，我想给它一个图像目录和一个引用这些图像的现有 .css 文件，并让它创建一个用所有小图像优化的大图像，并更改我的 .css 文件以引用这些图像。

至少我希望它获取一个图像目录并生成一个大精灵和将每个图像用作背景所需的 .css。

是否有任何好的 Photoshop 插件或完全成熟的应用程序可以做到这一点？

我正在尝试使用 CSS 使用精灵来为我的风险矩阵设置动画......它在 Firefox 和 Chrome 中运行良好，但图像不会出现在 IE 中......

代码在下面，不想在这里粘贴整个东西，但摘录显示了模式：

CSS：

我用 IE Dev 检查了样式。工具栏（我想要 IE 的萤火虫），所有样式都到位，图像在服务器上，但它不会在 IE 中显示！

我很确定这是一些愚蠢的 IE CSS 怪癖，请帮忙。

更新： @RoBorg：你的建议没有解决问题，但它解决了“悬停”问题。问题出在绝对定位的外部 div 和一些菜单样式上，它们以某种方式把整个事情搞砸了。

在 CSS Sprites 中，您经常会在每个图像之间找到填充。我相信这个想法是，如果页面被调整大小，那么一个图像不会渗入另一个图像。

我认为这取决于不同类型的浏览器缩放（杰夫最好解释）。

但是，我无法在我的测试中看到这种行为。这只是旧浏览器的问题吗？（我目前无法使用 IE6 进行测试，所以我将其视为“旧”）。

我还应该担心留下空间吗？它是一种痛苦。

例如 ：

我为 AOL 找到的 CSS Sprite 在每个图像之间都有填充：查看

但每日秀决定不打扰：查看

我有一个关于 css 中精灵的快速问题：如果我在 css 文件中包含两次相同的图像，我会发送两个 HTTP 请求吗？例如，如果我想从同一个图标集图像中加载两个不同的按钮：

还是有另一种方法只包含一次图像？