问题标签 [css-sprites]

我有一个网页，其中包含大约 20 - 50 个动态图像（从非静态源提供的图像）。这些图像是通过基于请求 URL 的 servlet 提供的。这会导致为每个图像生成一个请求，从而导致性能下降。

如果这些图像是静态的，我会创建一个 CSS 精灵并将 50 个请求替换为一个。由于它们是动态的，这当然不是那么容易。我正在寻找一种可以用来在运行时将这些图像聚合成单个精灵的工具/库/方法。幸运的是，图像大小是恒定的，并且对所有人来说都是一样的，这应该会让这变得更容易。

有什么建议么？

我正在制作一个精灵，它的高度约为 4000 像素。图形设计社区中是否有用于最大精灵高度的通用尺寸？

为什么 Internet Explorer 不呈现我制作的这个 .css sprite 菜单？有人可以帮我解释一下，因为我在代码中找不到任何错误。 html:

用于包装器和链接的 CSS：

以及 a:link 和 :hover 的示例 css：

这是一个简单的网页。我希望文本和图像在单元格中垂直居中。我想要图像左侧的文字，但这不应该是一个问题......

你能帮忙吗？

默认.css。添加到您认为合适的位置。

更新：

我收回了之前的一些评论，包括说埃文的回答有效。

以下工作。注意“*”。埃文的回答不包括. “ ”是什么意思？

.style1 * { 垂直对齐：中间；}

我得到了一个PNG，其中编码了多个图像。如何使用 HTML 中的所有图像，一个默认，鼠标悬停使用另一个（我不想创建不同的图像和工作）。

有没有例子？

是否可以将 CSS 精灵用于列表背景图像？通常，我使用 CSS 渲染我的精灵，如下所示：

<li> 元素的子弹可以使用精灵吗？有称为 list-style-image 和 list-style-position 的 CSS 属性，但我不确定如何在没有 list-style-image-width 和 list-style-image-height 等属性的情况下使其工作也是。

谢谢。

在这篇文章http://css-tricks.com/css-sprites/中，它讨论了如何从 1 个较大的图像中裁剪出较小的图像。您能否告诉我是否有可能/如何裁剪较小的图像，然后在布局之前缩放裁剪的区域？

这是那篇文章的一个例子：

我想知道从 spriteme1.png 裁剪图像后如何缩放该图像

这是示例的 URL： http: //css-tricks.com/examples/CSS-Sprites/Example1After/

所以我想知道是否可以将Item1,2,3,4旁边的图标变小？

有谁知道是什么导致精灵翻转跳来跳去

我认为这更有可能是一个 Photoshop 问题，但我并不完全确定。无论如何，我希望在这里得到答案，因为我认为大多数网页设计师/程序员可能也使用 Photoshop。

这就是我希望翻转执行的示例 1

这是我的测试页（见播放按钮）

我用 spriteme.com 制作了精灵

谢谢，理查德

我想让“立即登录”的文本值从我使用以下内容的标签中透明... <input type="image" value="Login Now">，我是否只需设置背景颜色：透明？

所以我需要在布局上使用一些自定义颜色，但我正在寻找一种更好的方法，而不是在布局中用 (background: url(something.jpg)) 拍一张巨大的图片。

大多数情况下，我正在考虑获取一个调色板（即来自 Adob​​e Kuler、colorlovers 等），获取每种颜色的 5x5 样本并将它们粘贴到 CSS sprite 的数组中，或者作为单独的文件并通过以下方式访问它们：.color-one {transparent url(./one.gif) repeat}并且只是每当我想使用颜色时重复使用它。

这样做有什么缺点吗？如果有的话我应该坚持使用网络安全颜色还是有更好的方法呢？