CSS Sprites重复图像

Question

我想知道是否有任何方法只使用一个图像来使用css sprites重复和非重复图像。 因此，在这种情况下，我想将页面上的所有图像组合在一起，无论宽度和高度如何，以及它们是否将用作重复或非重复图像。 我知道标准是使用所有非重复图像创建1个图像，使用所有重复图像创建另一个图像。但我只是想知道我是否可以只使用1张图像。

感谢。

Answer 1

简短的回答是“不”。

解释是重复图像以其重复的任何方向完整显示。因此，设置为repeat-x的背景将在水平方向上显示所有图像内容。这就是为什么你不能使用精灵同时在两个方向上重复的原因。

Answer 2

  

我知道标准是创造1   使用所有非重复的图像   使用所有的图像和另一个图像   重复图像。

我认为你错了。选择性地平铺图像的一部分是不可能的。您只能完整地平铺图像。因此，所有重复图像必须存在于自己的图像文件中。

Answer 3

@Ryan Kinal在他的answer中说精灵图像不能用于重复背景图像（两个方向）时是对的。

仍然有一种方法可以跨浏览器只使用一个或两个文件（不是图像），但它并不那么简单，并且应该证明修改起来很复杂（尽管sprite也很难修改，但至少它是视觉的！）。

• data: base64 encoding适用于现代浏览器和IE8 +
• MHTML适用于IE7及以下版本（请参阅Vista上的IE7评论），由Stoyan Stefanov重新发现或翻译

如PHPIED文章中所述，内联图像重复两次，但在3条条件注释的帮助下，您可以将IE7及以下文件与MHTML文件，IE8及以上文件对准数据：base 64 file和！IE with相同的数据文件。

您的服务器上最终会有5个不同的文件，而且任何给定的浏览器都会下载4个文件：

• 带有no-repeat精灵的图片
• 带有repeat-x精灵的图片
• 带有repeat-y精灵的图片
• MHTML的文件（应该提供给IE7及以下版本）background-images
• 用于相同重复背景图像的文件，但是为IE8 +和IE浏览器编码的数据

不应对大型重复图像进行编码，因为文件大小可能会增加很多，您的设计可能会有所不同。

Answer 4

不幸的是，您不能强制这两种图像在同一个精灵上工作。通常重复图像是较大图像（梯度）的一小部分，可以重复以便节省加载时间和大小。您可以水平，垂直和两者重复图像。
两者均为repeat-x，repeat-y或repeat。对于精灵上的非重复图像，您需要指示滚动坐标，例如scroll 60px -20px（60px是左坐标，-20px是顶坐标）。