CSS 精灵重复图像
我想知道是否有任何方法可以使用 css sprites 仅使用一张图像来重复和不重复图像。 因此，在这种情况下，我想组合页面上的所有图像，无论宽度和高度如何，以及它们是否将用作重复或非重复图像。 我知道标准是使用所有非重复图像创建一个图像，并使用所有重复图像创建另一个图像。但我只是想知道我是否可以只使用一张图像来完成所有内容。
谢谢。
I was wondering if there is any way to use just one image for repeating and non-repeating images using css sprites.
So in this case I would like to combine all the images on a page no matter what width and height and if they will be used as repeating or non-repeating images.
I know the standard is to create 1 image using all the non-repeating images and another image using all the repeating images. But i just wanted to know if i could just use 1 image for everything.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
简短的回答是“不”。
解释是，无论重复的方向如何，重复的图像都会完整显示。因此，设置为
repeat-x的背景将在水平方向显示所有图像内容。这就是为什么您不能使用精灵同时在两个方向上重复。The short answer is "no".
The explanation is that repeating images are displayed in their entirety in whatever direction they repeat. So, a background that is set to
repeat-xwill show all image content in the horizontal direction. This is why you can't repeat in both directions simultaneously using sprites.我认为你错了。不可能选择性地平铺图像的一部分。您只能平铺整个图像。因此，所有重复图像必须存在于它们自己的图像文件中。
I think you are mistaken. It's impossible to selectively tile a segment of an image. You can only tile an image in its entirety. Thus, all repeating images must live in their own image files.
@Ryan Kinal 在他的答案中说精灵图像可以'是正确的不可用于重复背景图像（在两个方向）。
还有一种方法可以只用一两个文件（不是图像）来实现跨浏览器，但它并不是那么简单，而且修改起来应该很复杂（虽然精灵也很复杂，但至少它是视觉的！ ）。
正如 PHPIED 文章中所述，内联图像重复两次，但借助 3 个条件注释，您可以使用 MHTML 文件瞄准 IE7 及以下版本，使用数据：base 64 文件瞄准 IE8 及以上版本，并使用相同的数据文件瞄准 !IE。
最终，您的服务器上会出现 5 个不同的文件，并且任何给定浏览器都会下载 4 个文件：
no-repeat-ing sprites 的图像repeat-x-ing sprites 的图像repeat-y-ing 的图像精灵大不应对重复图像进行编码，因为文件大小可能会增加很多，您的设计可能会有所不同。
@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!).
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:
no-repeat-ing spritesrepeat-x-ing spritesrepeat-y-ing spritesLarge repeating images shouldn't be encoded as filesize could increase a lot, your design may vary.
不幸的是，您不能强制两种图像在同一个精灵上工作。通常，重复图像是较大图像（渐变）的一小部分，可以重复该图像以节省加载时间和大小。您可以水平、垂直或两者重复图像。
repeat-x、repeat-y或两者都repeat。对于精灵上的非重复图像，您需要指示滚动坐标，例如滚动 60px -20px（60px 是左侧坐标，-20px 是顶部坐标）。Unfortunately you can't force both kinds of images to work on same sprite. Usually repeating image is a little part of a larger image (gradient) that could be repeated in order to save on loading time and size. You can repeat images horizontally, vertically and both.
repeat-x,repeat-yor justrepeatfor both. For non repeating images on the sprite you need to indicate scroll coordinates such asscroll 60px -20px(60px is left coordinate and -20px is top coordinate).