CSS Sprites重复图像

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

谢谢。

来源

2010-07-28 fhd

简短答案是“否”。

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

来源

2010-07-28 19:00:38

最后是正确的答案，这需要在顶部和选择。对不起，瑞恩放弃了这个线程。 – 2016-01-11 00:02:20

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

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

来源

2010-07-28 19:05:43 advait

没有我很确定你可以使用精灵重复图像这是怎么样 div background-image：url（sprite8.png）; background-repeat：repeat-y; width：160px; padding：20px; margin：20px; float：left; } 例子： http://www.phpied.com/background-repeat-and-css-sprites/ http://spriteme.org/demo.php – fhd 2010-07-28 19:16:36

可以，事实上，重复图片使用精灵，但只能水平或垂直（独占）。并且图像必须是相同的高度（垂直）或宽度（水平）才能在相同的文件中。 – 2010-07-28 19:23:25

瑞恩是正确的。您可以将重复图像捆绑在一个精灵中，一个用于repeat-x，另一个用于重复-y。但是，在这两种情况下，你都必须分别知道最大宽度和高度。由于我很少想承诺，我经常只是在自己的单独文件中重复背景。 – 2010-07-28 20:37:04

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

还有一种方法可以在只有一个或两个文件（而不是图像）的情况下跨浏览器，但它并不那么简单，修改起来应该很复杂（虽然精灵的修改也很复杂，但在至少它是可视的！）。

data: base64 encoding现代浏览器和IE8 +
MHTML为IE7及以下（见IE7在Vista上的评论），由斯托扬斯特凡

由于PHPIED文章中指出，内联重新发现或翻译图像重复两次，但借助3个条件注释，您可以将IE7及以下版本与MHTML文件，IE8及更高版本一起使用数据：base 64文件和！IE与相同的数据文件。

你结束了你的服务器上，并通过任何浏览器下载5个不同的文件4：

图像与no-repeat -ing精灵
图像与repeat-x -ing精灵
图像与repeat-y -ing精灵
为MHTML一个文件（应当投放到IE7及以下）的背景图像
对于相同的重复b A文件但数据编码为IE8 +和！IE浏览器

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

来源

2010-07-28 20:09:45 FelipeAls

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

来源

2010-07-28 20:47:54

CSS Sprites重复图像

回答

相关问题