5

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

谢谢。

4

4 回答 4

16

最简洁的答案是不”。

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

于 2010-07-28T19:00:38.347 回答
2

@Ryan Kinal is right when saying in his answer that a sprite image can't be used for repeating background images (in both directions).

There is still a way to do it cross-browser with only one or two files (not images), but it isn't that simple and should prove complicated to modify (though sprites are also complicated to modify, but at least it's visual!).

  • data: base64 encoding for modern browsers and IE8+
  • MHTML for IE7 and below (see comments for IE7 on Vista), rediscovered or translated by Stoyan Stefanov

As stated in the PHPIED article, the inline images are repeated twice but with the help of 3 conditional comments you can aim IE7 and below with the MHTML file, IE8 and above with the data: base 64 file and !IE with the same data file.

You end up with 5 different files on your server and 4 downloaded by any given browser:

  • an image with no-repeat-ing sprites
  • an image with repeat-x-ing sprites
  • an image with repeat-y-ing sprites
  • a file for MHTML (should be served to IE7 and below) background-images
  • a file for the same repeating background images but data encoded for IE8+ and !IE browsers

Large repeating images shouldn't be encoded as filesize could increase a lot, your design may vary.

于 2010-07-28T20:09:45.747 回答
2

我知道标准是使用所有非重复图像创建一个图像，并使用所有重复图像创建另一个图像。

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

于 2010-07-28T19:05:43.513 回答
0

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

于 2010-07-28T20:47:54.233 回答